React 18.2.0中style属性设置背景图片不显示问题求助

问题描述 #

我正在Udemy平台学习Zero To Mastery（ZTM）的React 18.2.0课程，目前Udemy的提问功能被禁用，因此在此求助。以下代码运行时一切正常，唯独通过backgroundImage设置的图片无法显示，图片URL在浏览器中可正常访问，且无其他任何错误。

代码示例 #

import "./categories.styles.scss"
//import CategoryItem from "./components/category-item/category-item.component";

const App = () => {
  const categories = [
    {
      "id": 1,
      "title": "hats",
      "imageUrl": "https://i.ibb.co/cvpntL1/hats.png"
    },
    {
      "id": 2,
      "title": "jackets",
      "imageUrl": "https://i.ibb.co/px2tCc3/jackets.png"
    },
    {
      "id": 3,
      "title": "sneakers",
      "imageUrl": "https://i.ibb.co/0jqHpnp/sneakers.png"
    },
    {
      "id": 4,
      "title": "womens",
      "imageUrl": "https://i.ibb.co/GCCdy8t/womens.png"
    },
    {
      "id": 5,
      "title": "mens",
      "imageUrl": "https://i.ibb.co/R70vBrQ/men.png"
    }
  ];
  
 
  return (
    <div className="categories-container">
      {categories.map(({title,id,imageUrl}) => (

        <div key={id} className="category-container">
          <div 
            className='background-image' 
            style={{
            backgroundImage: `url(${imageUrl})`
          }}>

          </div>
          
          <div className='category-body-container'>
          <h2>{title}</h2>
          <p>Shop Now</p>
        </div>
      </div>

      ))}
    </div>
  );    
 
};

export default App;

解决方案 #

最可能的原因是空容器没有尺寸：.background-image是一个空div，默认宽高为0，导致背景图无法显示。按以下步骤修复：

• 给.background-image设置尺寸和背景属性：在categories.styles.scss中添加样式：

.background-image {
  width: 100%;
  height: 280px; /* 根据需求调整高度 */
  background-size: cover; /* 让图片覆盖整个容器 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 避免图片重复 */
}

• 验证样式生效：打开浏览器开发者工具，查看.background-image元素的尺寸和background-image属性是否正确加载，确认没有其他样式覆盖该元素的背景设置。

• 检查URL拼接：当前代码中style={{backgroundImage: url(${imageUrl})}}的模板字符串语法正确，无需修改。

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