时间戳

首页 > 解决方案 > 图像未显示在反应中

arrays - 图像未显示在反应中

问题描述

您好，这是我的代码：

        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;

问题是图像没有显示出来。但是 img 底部的文本 h3 和 p 已经出现了。错误是 img 元素必须有一个 alt 道具反应...但是当我尝试输入 alt="food menu" 时，图像仍然没有显示。请帮助我...谢谢。

标签： arraysreactjsimage

解决方案

您可以从对象中删除 url，例如：

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

推荐阅读