React内联样式映射数组设置backgroundImage不显示问题

• 基于Vite/Create React App等工具搭建的React项目，构建工具只会处理被显式导入、或符合语法规则被识别为静态资源依赖的文件。直接在JS字符串里写url(../../Assets/pug.svg)这类相对路径，构建工具不会解析替换为打包后的真实资源路径，浏览器请求时会找不到对应图片，且因为JS语法本身没有错误，控制台不会抛出报错。
• 如果.skill-image类没有设置明确的宽高，div默认高度为0，就算背景图加载成功也无法正常显示。

方案1：顶部导入静态资源（通用推荐） #

1. 先在Skills.js文件顶部导入需要用到的svg资源，让构建工具识别到资源依赖：

import pugSvg from '../../Assets/pug.svg'
import scssSvg from '../../Assets/scss.svg'

2. 修改skills数组，直接传入导入的资源变量，不要手动包裹url()：

const skills = [
  {
    id: 1,
    title: 'Pug',
    image: pugSvg
  },
  {
    id: 2,
    title: 'SCSS',
    image: scssSvg
  }
]

3. 修改内联样式的写法，在渲染时拼接url()包裹资源路径：

{
  skills.map(skill => (
    <motion.div className='column' key={skill.id} variants={container}>
       <div className='skill'>
         <div 
           className='skill-image' 
           style={{ backgroundImage: `url(${skill.image})` }}
         />
         <h3>{skill.title}</h3>
       </div>
    </motion.div>
  ))
}

方案2：使用URL构造函数动态获取资源路径 #

如果不想在顶部挨个导入资源，可以直接在定义skills时用new URL获取资源的真实访问路径，适配构建工具的解析规则（Vite原生支持，CRA 4+版本支持）：

const skills = [
  {
    id: 1,
    title: 'Pug',
    image: new URL('../../Assets/pug.svg', import.meta.url).href
  },
  {
    id: 2,
    title: 'SCSS',
    image: new URL('../../Assets/scss.svg', import.meta.url).href
  }
]

渲染部分的内联样式写法和方案1保持一致即可。

补充样式配置 #

给skill-image类添加基础样式，确保容器有足够尺寸展示背景图：

.skill-image {
  width: 64px;
  height: 64px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

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