React 18.2.0 风格的属性不渲染图像答案

【问题标题】：React 18.2.0-style property not rendering imageReact 18.2.0 风格的属性不渲染图像
【发布时间】：2022-10-17 18:58:48
【问题描述】：

我目前正在学习 Udemy 的 ZTM React 课程版本 18.2.0。无论出于何种原因，在 Udemy 网站上发布问题已被禁用，所以我在这里发布。当我运行它时，以下代码渲染得很好——除了图像。图片 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;

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

您的类别应该是这样的对象数组

 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',
    },
  ];

您上面的类别示例类似于 json

【讨论】：

【解决方案2】：

此外，链接不起作用。尝试在本地下载图像

【讨论】：