显示来自本地 json 服务器的图像，通过其 src 与 JSX 进行动态反应答案

【问题标题】：Display images from local json server in react dynamic with JSX by its src显示来自本地 json 服务器的图像，通过其 src 与 JSX 进行动态反应
【发布时间】：2022-09-03 01:50:22
【问题描述】：

这是我的 json 文件中 8 个对象中的一个。

     {"name": "Checken", "details": "checken",  "icart": "No",
  "id": 7, "count": 32, "price": 19, "itnum": 1, "src":"./checken.jpg"}

我的应用程序组件。

state = {
     products: []
 }
async componentDidMount () {
 const {data} = await axios.get("http://localhost:8000/products");
 this.setState({products: data})

 }

这来自我的组件，它通过其 src 呈现图像。我在数据上映射并制作一个指向对象的 (p) 并说图像 src 将来自 p.src
```
<li><img src={p.src} alt="not found"/></li>
```
错误是图像不存在，我必须做什么才能使图像正确显示？

【问题讨论】：

错误是什么？
图像不存在..它只是替代文字
你可以打印products 来检查它们在从远程 API 获取后到底是什么吗
一切正常，但图像不存在

标签： reactjs image jsx json-server

【解决方案1】：

您必须在互联网上上传图片并将 url（在网上上传的图片链接）放入您的 db.json 文件中

【讨论】：

【解决方案2】：

您必须将图像放在公共文件夹中。我刚刚测试过，它可以工作。如果图像的“src”正确，请查看 json 文件

【讨论】：