React 18.2.0风格属性不渲染图像

Question

我目前正在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;

Answer 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的

Answer 2

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