如何在 Netlify 上配置 React 项目以成功引用本地图片资源？
- 内容介绍
- 文章标签
- 相关推荐
本文共计846个文字，预计阅读时间需要4分钟。
抱歉，您提供的文本似乎不完整，无法进行修改。请提供完整的文本内容，以便我能够按照您的要求进行简化或改写。
在 React 中，不能直接使用基于文件系统位置的相对路径（如 ./src/assets/xxx.svg 或 /src/assets/xxx.svg）作为 <img src> 的值——因为这些路径在生产构建后并不存在于最终的 public/ 或输出目录中。Netlify 托管的是 build/（或你配置的 publish directory）下的静态文件，而该目录中不会包含 src/ 文件夹，所有源码都会被编译、打包、重命名（如添加 hash），并输出到扁平化的静态资源结构中。
✅ 正确做法：用 ES 模块导入图片
React（配合 Create React App、Vite 或其他标准构建工具）支持将图片等静态资源作为模块导入。Webpack/Vite 会自动将其处理为可访问的公共 URL（如 /static/media/initialsThicc.abc123.svg），并在构建时确保该文件被复制到输出目录。
本文共计846个文字，预计阅读时间需要4分钟。
抱歉，您提供的文本似乎不完整，无法进行修改。请提供完整的文本内容，以便我能够按照您的要求进行简化或改写。
在 React 中，不能直接使用基于文件系统位置的相对路径（如 ./src/assets/xxx.svg 或 /src/assets/xxx.svg）作为 <img src> 的值——因为这些路径在生产构建后并不存在于最终的 public/ 或输出目录中。Netlify 托管的是 build/（或你配置的 publish directory）下的静态文件，而该目录中不会包含 src/ 文件夹，所有源码都会被编译、打包、重命名（如添加 hash），并输出到扁平化的静态资源结构中。
✅ 正确做法：用 ES 模块导入图片
React（配合 Create React App、Vite 或其他标准构建工具）支持将图片等静态资源作为模块导入。Webpack/Vite 会自动将其处理为可访问的公共 URL（如 /static/media/initialsThicc.abc123.svg），并在构建时确保该文件被复制到输出目录。