React 未在浏览器上渲染 .png 照片

Question

我正在开发小型车库应用程序，我不是苹果，无法在浏览器中渲染汽车照片。

我只是在图像上获取占位符

错误快照](https://i.sstatic.net/4adtr4xL.png)

` 从 'react' 导入 React；

function Products() {

   const cars = [
    { id: 1, name: 'Toyota Camry', price: 25000, img: '../assets/images/toyota_camry2023.png'     },
    { id: 2, name: 'Honda Civic', price: 27000, img: '../assets/images/honda_civic2023.png' },
    { id: 3, name: 'Ford Mustang', price: 35000, img: '../assets/images/ford_mustang2023.png'  },
]

   return (
       <div>
          <h2>Find The Best Deals</h2>
          <h2>Available Cars</h2>
          `<ul>{
          cars.map(car => (
            <li key={car.id}>
            <img src={car.img} alt={car.name}/>
                <h3>{car.name}</h3>
                <p>Price: ${car.price}</p>
                <button>More details</button>
            </li>
          ))
        }</ul>

        
    </div>
)

}

导出默认产品；``

尝试了 Stackoverflow 中之前提供的有关类似问题的所有解决方案，但没有成功

Answer 1

使用

import toyota from '../assets/toyota.png'

常量汽车 = [{ ...汽车, img: 丰田 }]

或在公共文件夹中添加文件并使用公共文件夹中的绝对路径。