React项目中import引入的图片不显示，添加alt属性仍未生效求助

问题排查与修复方案 #

存在的错误点 #

• 变量名拼写错误：导入的汉堡图片变量名为hamburger，但第一个商品对象中误写为humburger，导致资源引用失败
• 错误使用CSS url()语法：img标签的src属性直接接收导入的静态资源路径即可，url()是CSS背景图的专属写法，套用到src上会导致路径格式错误
• 对象属性名不统一：第二个商品（Kimchi）的图片字段为image，其余三个商品用的是gambar，遍历统一取product.gambar时第二个商品的图片值为undefined
• JSX结构错误：return的JSX中仅打开了2个div标签，末尾多写了2个多余的</div>，会触发语法报错
• 缺少img的alt属性，会触发React的可访问性警告

修正后完整代码 #

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: hamburger, // 修正拼写错误，去掉url()包裹
      harga: 10000
    },
    {
      menu: 'Kimchi',
      gambar: kimchi, // 修正属性名和url()问题
      harga: 15000
    },
    {
      menu: 'Topokki',
      gambar: topokki, // 去掉url()包裹
      harga: 20000
    },
    {
      menu: 'Sushi',
      gambar: sushi, // 去掉url()包裹
      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}>
            {/* 新增alt属性，src直接使用资源变量 */}
            <img src={product.gambar} alt="food menu" />
            <h3>{product.menu}</h3>
            <p>{product.harga}</p>
          </div>
        )
      })}
    </div>
  );
}
      
export default Soal2;

内容的提问来源于stack exchange，提问作者Firsty Ukhti Molyndi