React中无法从assets文件夹导入背景图片的问题

尝试在React应用的CSS中渲染背景图片，计划通过CSS媒体查询为不同屏幕尺寸设置不同的背景图，但目前背景图片无法正常加载。

现有代码 #

CSS代码 #

.Background {
  background-image: url("./blabla.jpeg"); 
  height: 300px;
  width: 600px;
}

React组件代码 #

export default function App() {
  return (
    <div className="App">
      <div className="Background">Hello</div>
    </div>
  );
}

解决方法 #

1. 校验文件路径与资源位置 #

• 确认blabla.jpeg文件存在于CSS文件的同级目录，或路径指向正确。若图片放在项目的public文件夹中，需将路径改为url("/blabla.jpeg")（直接从根目录寻址）。
• React脚手架（如Create React App）中，CSS里的相对路径是相对于CSS文件本身，而非使用该样式的组件文件。

2. 模块导入图片（推荐方案） #

在React中，通过组件导入图片资源能让打包工具自动处理路径，避免加载失败：

import backgroundImg from './blabla.jpeg';

export default function App() {
  return (
    <div className="App">
      <div className="Background" style={{ backgroundImage: `url(${backgroundImg})` }}>Hello</div>
    </div>
  );
}

3. 响应式背景图实现（媒体查询适配） #

要为不同屏幕设置不同背景图，可结合以下两种方式：

方式一：CSS变量+组件导入

先在组件中导入多尺寸图片，通过CSS变量传递给样式：

import mobileBg from './mobile-bg.jpeg';
import desktopBg from './desktop-bg.jpeg';

export default function App() {
  return (
    <div className="App">
      <div 
        className="Background" 
        style={{ 
          '--mobile-bg': `url(${mobileBg})`,
          '--desktop-bg': `url(${desktopBg})`
        }}
      >
        Hello
      </div>
    </div>
  );
}

对应的CSS样式：

.Background {
  height: 300px;
  width: 600px;
  background-image: var(--mobile-bg);
}

@media (min-width: 768px) {
  .Background {
    background-image: var(--desktop-bg);
  }
}

方式二：纯CSS（资源放public目录）

若图片存放在public文件夹，可直接在CSS中使用绝对路径配合媒体查询：

.Background {
  height: 300px;
  width: 600px;
  background-image: url("/mobile-bg.jpeg");
}

@media (min-width: 768px) {
  .Background {
    background-image: url("/desktop-bg.jpeg");
  }
}

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