React项目中路径正确的本地图片无法在浏览器显示问题咨询

根本原因 #

这个问题是webpack的静态资源编译机制导致的：

• import和require都是编译时执行的静态语法，webpack会在代码编译阶段就识别引入的资源路径，把对应图片打包到产物目录，同时返回最终可访问的资源路径。
• 你直接把路径字符串存在JSON里，属于运行时才会拿到的动态变量，webpack编译阶段无法识别这个路径对应的资源，不会把图片打包进产物，自然运行时无法加载。
• 直接把JSON里的相对路径赋值给src也会失效：浏览器解析相对路径是相对于当前页面的URL，而非源码文件的存储位置，路径匹配不上自然404。

可行解决方案 #

方案1：把路径配置从JSON改为JS文件 #

JSON不支持执行表达式，你可以把配置改成.js后缀的模块，直接在路径外层包require：

// 配置文件 config.js
module.exports = {
  images: {
    mobil: require("./images/portfolio/desktop/finshed-next.png"),
    tablet: require("./images/portfolio/tablet/finshed-next.png"),
    desktop: require("./images/portfolio/desktop/color.png"),
  }
}

业务代码里直接使用即可：

import config from './config.js'
<img src={config.images.desktop} alt={title} />

方案2：把图片放到public目录下 #

把所有图片移到项目根目录的public文件夹中，JSON里存储相对于public目录的绝对路径：

// 原JSON配置
images: {
  mobil: "/images/portfolio/desktop/finshed-next.png",
  tablet: "/images/portfolio/tablet/finshed-next.png",
  desktop: "/images/portfolio/desktop/color.png",
}

直接赋值给src即可，public下的资源不会被webpack编译，会直接复制到打包产物根目录，路径完全匹配：

<img src={images.desktop} alt={title} />

方案3：require时固定前缀动态拼接后缀 #

如果你必须用JSON存储路径，可以把固定的路径前缀写到require里，只把可变部分存在JSON：

// JSON只存可变后缀
images: {
  mobil: "portfolio/desktop/finshed-next.png",
  tablet: "portfolio/tablet/finshed-next.png",
  desktop: "portfolio/desktop/color.png",
}

使用时静态写死前缀，webpack会提前把./images下的所有资源打包，动态拼接也能识别：

<img src={require(`./images/${images.desktop}`)} alt={title} />

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