动态拼接props传入路径设置div背景图时本地图片不显示是什么原因

问题原因 #

• 写死路径通过import引入静态资源时，Webpack/Vite等项目构建工具会在编译打包阶段识别该资源引用：
  1. 自动将对应图片压缩、添加哈希重命名后输出到打包产物的静态资源目录
  2. 把import引入的变量值替换为图片打包后的可访问路径
• 采用../../../assets/upload/${props.path}动态拼接路径时，props.path是运行时才会确定的动态值，构建工具在打包阶段无法识别这是静态资源引用，不会处理对应图片也不会替换路径。打包后源码目录结构和线上运行的产物目录结构不一致，相对路径自然无法定位到资源。

解决方法 #

方案1：将动态引用的图片放到静态资源目录 #

Vite构建的项目把需要动态引用的图片放到根目录public文件夹下：

• 把assets/upload/目录整体移动到public下
• 代码直接通过绝对路径引用：

// 注意：public目录下的资源引用路径直接以/开头，不需要写public前缀
const Component = (props) => {
  return <div style={{backgroundImage: `url(/upload/${props.path})`}}></div>
}

Webpack构建的项目（如旧版Vue-cli、Create React App）同理，将图片放到static或public目录后调整对应路径即可。

方案2：Vite环境使用import.meta.glob批量引入 #

如果不想把图片移出assets目录，可以在组件顶部批量预引入所有需要用到的图片：

// 批量匹配upload目录下所有jpg、png格式图片，eager设为true表示直接加载所有模块
const imgModules = import.meta.glob('../../../assets/upload/**/*.{jpg,png}', { eager: true })

const Component = (props) => {
  // 匹配对应路径的图片资源，拿到打包后的访问地址
  const imgUrl = imgModules[`../../../assets/upload/${props.path}`]?.default
  return <div style={{backgroundImage: `url(${imgUrl})`}}></div>
}

方案3：Webpack环境使用require动态引入 #

Webpack构建的项目可以用require包裹动态路径，让构建工具识别资源引用：

const Component = (props) => {
  // require路径必须包含固定前缀，Webpack会自动处理前缀对应目录下的所有资源
  const imgUrl = require(`../../../assets/upload/${props.path}`)
  return <div style={{backgroundImage: `url(${imgUrl})`}}></div>
}

补充：你给出的示例代码存在语法错误，function是JS关键字不能用作变量名，箭头函数写法应为const 组件名 = (props) => { return 元素 }，实际使用时注意修正。

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