React中img标签src属性使用数组存储的图片路径无法渲染图片

架构老林

2026-10-1

问题根因

你使用的React项目依赖构建工具（如Create React App、Vite）完成打包，构建过程中src目录下的静态资源会被做特殊处理：包括文件名追加哈希值、路径改写适配打包输出目录等。只有通过import语句引入的资源才会被构建工具识别处理，直接写在数组里的相对路径属于纯字符串，不会被工具解析，因此打包后路径指向的资源不存在，图片无法渲染。

解决方案

方案1：提前导入资源存入数组

这是最稳妥的适配方案，和你测试可用的逻辑一致，可结合数组map方法简化渲染代码：

// 顶部先导入所有图片资源
import temp1 from "../../../assets/temp.jpg";
import temp2 from "../../../assets/temp2.jpg";
import temp3 from "../../../assets/temp3.jpg";

// 组件内定义图片数组
const images = [temp1, temp2, temp3];

// 渲染逻辑
return(
    <div>
        {images.map((src, idx) => <img key={idx} src={src} alt="image cover" />)}
    </div>
);

方案2：将图片放入public目录

如果图片数量多，逐个导入效率低，可以把所有要渲染的图片放到项目根目录的public文件夹下（如public/assets/），该目录下的资源会被原样复制到打包输出目录，不需要提前导入，直接写绝对路径即可：

// 路径直接从public目录的根路径开始写
const images=["/assets/temp.jpg", "/assets/temp2.jpg", "/assets/temp3.jpg"];

return(
    <div>
        {images.map((src, idx) => <img key={idx} src={src} alt="image cover" />)}
    </div>
);