React中使用background属性加载数组动态相对路径图片失败如何解决？

问题原因 #

这个问题是webpack打包的特性导致的：require是编译期执行的逻辑，你传入完全动态的变量a（也就是x.url）时，webpack在编译阶段无法推断具体的资源路径，不会提前打包对应的图片，运行时自然找不到资源。而你写死字符串路径的情况下，webpack编译时可以直接识别路径、打包对应资源，所以能正常加载。

解决方案 #

方案1：提前在数组中预引入资源（最稳妥） #

直接把图片的引入结果提前存到数组里，不需要运行时动态require：

const list = [
  { id: 1, url: require("../Images/mentorship.jpg").default },
  { id: 2, url: require("../Images/entertainment.jpg").default },
  { id: 3, url: require("../Images/support.jpg").default },
  { id: 4, url: require("../Images/opportunity.jpg").default },
  { id: 5, url: require("../Images/counselling.jpg").default },
];

然后style里直接调用即可：

style={{
  background: `url(${x.url})`,
  backgroundSize: "auto 100%",
  backgroundPosition: "center",
}}

方案2：固定路径前缀的动态require #

如果一定要存路径字符串，可以把目录前缀固定写在require参数里，只动态拼接文件名部分，webpack会自动打包对应目录下的所有匹配资源：
首先修改数组仅存储文件名：

const list = [
  { id: 1, filename: "mentorship" },
  { id: 2, filename: "entertainment" },
  { id: 3, filename: "support" },
  { id: 4, filename: "opportunity" },
  { id: 5, filename: "counselling" },
];

然后在require里固定路径前缀：

background: `url(${require(`../Images/${x.filename}.jpg`).default})`

方案3：使用public目录托管静态资源 #

把所有图片放到项目public目录下的images文件夹中，不需要require，直接用绝对路径引用：

const list = [
  { id: 1, url: "/images/mentorship.jpg" },
  { id: 2, url: "/images/entertainment.jpg" },
  { id: 3, url: "/images/support.jpg" },
  { id: 4, url: "/images/opportunity.jpg" },
  { id: 5, url: "/images/counselling.jpg" },
];

style直接引用路径即可：

background: `url(${x.url})`

内容的提问来源于stack exchange，提问作者Syed Sibteali Baqar