React项目中JS数组存储的本地图片无法加载问题求助

你遇到的本地图片加载失败问题是代码存在3个核心错误导致的：

• ES模块的import导入语句必须放在文件最顶部，不能写在数组内部
• id为3的配置中，img字段赋值为{theBestTestImg}相当于传递了一个对象，而img标签的src属性仅支持接收字符串格式的资源地址
• id为2的配置直接填写本地相对路径字符串，React打包阶段不会解析这类直接写死的相对路径资源，无法映射到打包后的实际资源地址

网络图片可以正常加载是因为资源为完整的公网可访问URL，不需要经过本地打包工具的资源解析，可直接被浏览器识别加载

方案1：提前导入所有本地图片（推荐，打包时会自动压缩资源） #

直接修正data.js的写法即可，其余组件不需要做任何改动：

// 所有import语句放在文件顶部
import theBestTestImg from "./src/assets/img/bestTest.png"
import anotherTestImg from "./src/assets/img/anotherTestImg.jpg"

export const products = [
  {
    id: 1,
    img: "https://images.pexels.com/photos/3585047/pexels-photo-3585047.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
    link: "http://aTestSite.xyz",
  },
  {
    id: 2,
    img: anotherTestImg,
    link: "https://anotherTestSite.com",
  },
  {
    id: 3,
    img: theBestTestImg,
    link: "https://theBestTestSite.ca",
  },
];

方案2：使用public文件夹存放静态资源 #

如果不想逐个导入图片，可以把所有图片放到项目根目录的public/img文件夹下，data.js可直接用绝对路径引用资源：

export const products = [
  {
    id: 1,
    img: "https://images.pexels.com/photos/3585047/pexels-photo-3585047.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500",
    link: "http://aTestSite.xyz",
  },
  {
    id: 2,
    img: "/img/anotherTestImg.jpg",
    link: "https://anotherTestSite.com",
  },
  {
    id: 3,
    img: "/img/bestTest.png",
    link: "https://theBestTestSite.ca",
  },
];

public文件夹下的资源不会被webpack打包处理，会直接复制到最终的打包产物目录，用绝对路径即可直接引用。

内容的提问来源于stack exchange，提问作者ransomenote