React如何在style内动态require src目录图片设置div背景图

解决方案 #

你遇到的问题本质是打包工具对动态资源导入的返回值格式与预期不符，以下方案不需要用<img />标签，也不需要迁移图片到public目录：

场景1：项目用Webpack搭建（比如create-react-app初始化的默认项目）

给动态require的返回值加.default属性即可，同时补充空值判断避免报错：

<div
  style={{
    backgroundImage: banner?.srcString ? `url('${require(`../../assets/images/home/${banner.srcString}`).default}')` : 'none',
    backgroundSize: "cover"
  }}
/>

如果是旧版Webpack配置，加.default反而失效的话，直接去掉.default即可。

场景2：项目用Vite搭建

Vite不支持require语法，需要用import.meta.url拼接动态路径：

// 组件内封装路径获取方法
const getBannerImgUrl = (imgName) => {
  return new URL(`../../assets/images/home/${imgName}`, import.meta.url).href
}

// 渲染div使用
<div
  style={{
    backgroundImage: banner?.srcString ? `url('${getBannerImgUrl(banner.srcString)}')` : 'none',
    backgroundSize: "cover"
  }}
/>

注意事项 #

• 动态路径必须保留固定的静态前缀（你当前写的../../assets/images/home/已经符合要求），打包工具会提前扫描这个目录下的所有资源完成预打包，才能匹配到动态传入的文件名
• 必须做非空判断，当banner.srcString为空时不要执行资源导入逻辑，否则会触发路径找不到的编译错误

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