图像在反应中没有显示

Question

你好，这是我的代码:

import React, {useState}  from 'react';
import './Soal2.css';
import img3 from './pink3.jpg';
import hamburger from './products/humburger.jpg';
import kimchi from './products/kimchi.jpg';
import topokki from './products/topokki.jpg'
import sushi from './products/sushi.jpg';


function Soal2() {

const [listProducts, setListProducts] = useState([{
menu: 'Batagor',
gambar: `url(${humburger})`,
harga: 10000
},
{
menu: 'Kimchi',
image: `url(${kimchi})`,
harga: 15000
},
{
menu: 'Topokki',
gambar:`url(${topokki})`,
harga: 20000
},
{
menu: 'Sushi',
gambar: `url(${sushi})`,
harga: 25000
} 
])



return (
<div className="Soal-2">
<div className="jawaban-2">
</div>
{listProducts.map((product, index) => {
const key = `product-${product.menu}-${index}`
return <div key={key}>
<img src={product.gambar} /> ---> this image is not showing up
<h3>{product.menu}</h3>
<p>{product.harga}</p>
</div>
})}
</div>
</div>
</div>
);
}

export default Soal2;

问题是图像没有显示。但是底部的文本h3和p已经显示出来了。错误是img元素必须有一个Alt prop反应…但是当我试着输入alt="food menu"图像仍然没有显示出来。请帮帮我……谢谢你。

Answer 1

您可以像这样从对象中删除url:

{
menu: 'Batagor',
gambar: humburger,
harga: 10000
},

Answer 2

在React native中，img需要像这样在样式prop中设置宽度和高度:

<img src={product.gambar} style={{height: 100, width: 100}} /> 

Answer 3

从json中删除url

{
menu: 'Topokki',
gambar:topokki,
harga: 20000
}

在像这样的图像中使用

<img src={listProducts[0].gambar} alt="{listProducts[0].menu" />