React.js本地图片加载问题：div背景图无法显示（img标签正常）

问题原因 #

在React项目里，直接在backgroundImage中使用相对路径（比如../assets/images/sandwich.jpg）无法正确加载图片，因为webpack打包时会改变文件的路径结构，这种写法没经过webpack的资源处理。而img标签能正常显示，是因为通过import导入时，webpack已经将图片路径转换为打包后的正确路径。

可行解决方案 #

方案1：将图片放到public目录 #

把图片移动到项目根目录的public文件夹下（比如创建public/images目录存放图片），然后用绝对路径引用：

// Test.js 修改后的代码
const Test = () => {
  // 从数据库获取的文件名
  const imageName = "sandwich.jpg";
  return (
    <div>
      <p>img标签正常显示</p>
      <img
        src={`/images/${imageName}`}
        style={{ width: "100px", height: "100px" }}
        alt="示例图"
      />
      <p>div背景图显示</p>
      <div
        style={{
          backgroundImage: `url(/images/${imageName})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          width: "200px",
          height: "200px",
          border: "1px solid black"
        }}
      ></div>
    </div>
  );
};

export default Test;

这种方式的优势是图片不会被webpack处理，路径始终基于public目录，完全适配动态获取文件名的场景。

方案2：使用动态require导入（图片在src目录） #

如果图片必须放在src目录下，可以用require动态加载图片，webpack会自动处理这些资源：

// Test.js 修改后的代码
const Test = () => {
  // 从数据库获取的文件名
  const imageName = "sandwich.jpg";
  // 动态导入图片，注意路径要和组件位置对应
  const imageUrl = require(`../assets/images/${imageName}`).default;
  
  return (
    <div>
      <p>img标签正常显示</p>
      <img
        src={imageUrl}
        style={{ width: "100px", height: "100px" }}
        alt="示例图"
      />
      <p>div背景图显示</p>
      <div
        style={{
          backgroundImage: `url(${imageUrl})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          width: "200px",
          height: "200px",
          border: "1px solid black"
        }}
      ></div>
    </div>
  );
};

export default Test;

注意：这种方式需要确保webpack配置了处理图片的loader（create-react-app、Vite等脚手架默认已配置），且动态路径不能完全是变量，需要保留部分固定路径让webpack识别要打包的资源范围。

方案3：使用process.env.PUBLIC_URL（适配部署子路径） #

如果项目部署在域名的子路径下，用process.env.PUBLIC_URL确保路径正确：

backgroundImage: `url(${process.env.PUBLIC_URL}/images/${imageName})`

这个变量会自动匹配项目的public URL，避免部署后路径错误。

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