圖像沒有出現在反應中

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;

問題是圖像沒有顯示。 但是底部 img 的文本 h3 和 p 已經顯示出來了。 錯誤是 img 元素必須有一個 alt prop 反應...但是當我嘗試鍵入 alt="food menu" 時，圖像仍然沒有顯示。 請幫助我...謝謝。

Answer 1

您可以從 object 中刪除 url，例如：

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

Answer 2

在 React Native 中，img 在 style 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" />