React移动图片文件夹到src后非CSS引用图片加载失败如何解决

React 框架对 public 和 src 目录下的资源采用完全不同的处理逻辑：

• public 下的资源不会经过webpack打包编译，构建时会直接复制到输出目录，可直接通过/xxx格式的绝对路径访问
• src 下的资源会被webpack处理，打包后会添加哈希后缀、调整路径映射，直接写字符串路径无法匹配到打包后的资源地址

场景1：固定路径的图片引用 #

你之前写的 <img src="/images/logo.png" alt="Logo" /> 需要改为导入后使用：

// 在当前文件头部引入图片，路径根据你的文件结构调整，示例为js文件位于src/components目录，images位于src根目录
import logoImg from '../images/logo.png';

// 渲染时直接使用引入的变量
<img src={logoImg} alt="Logo" />

场景2：动态拼接路径的图片引用 #

你原来的setImage(./images/${temp.img_bg}); 需要改为通过require动态引入：

// 注意模板字符串的固定路径部分要写全，相对路径规则同上
setImage(require(`../images/${temp.img_bg}`).default);

如果你的项目使用Vite构建，替换为如下写法：

setImage(new URL(`../images/${temp.img_bg}`, import.meta.url).href);

可选备选方案 #

如果你的图片不需要和组件绑定打包、属于公共静态资源，也可以将不需要在CSS中引用的图片放回public目录，保留原路径写法即可，CSS中引用的图片留在src目录不冲突。

内容的提问来源于stack exchange，提问作者John G.