我无法从Json文件与React Js连接图像

Question

我是ReactJs的新手，我无法解决从单独的Json文件连接图像路径与反应的问题，它只显示图像图标。
我不明白是有问题的图像路径或css代码(!但我没有写css图像^^)或其他…

?

src

components - "文件夹名称">

postCard.js

data——"文件夹名称">

datastore.json

img_reactjs01——"文件夹名称">

Katana.png

App.js

---

<标题>

我的代码postCard.js

import React, { Component } from "react";
import qData from "../data/datastore.json";
class Quotes extends Component{
render(){
return(
<div className="card-stl" onmouseover="this.bgColor='white'">
{
qData && qData.map((s)=>{
return(
<div className="post_Card" key={s.id}>
<picture className="card__picture">
<img src={s.image} alt={s.name} />
</picture>
<h2>{s.name}</h2>
<p>{s.price}</p>
<p>{s.description}</p>
</div>
)
})
}
</div>
)
}
}
export default Quotes;

datastore.json

[
{
"id": 1,
"name": "Product 1",
"image": "../img_reactjs01/Katana.png",
"price": "$20",
"description": "This is a description of Product 1"
},
{
"id": 2,
"name": "Product 2",
"image": "https://pin.it/5i1L9ZG",
"price": "$30",
"description": "This is a description of Product 2"
},
{
"id": 3,
"name": "Product 3",
"image": "https://pin.it/2pfRfgY",
"price": "$40",
"description": "This is a description of Product 3"
}
]

App.js

import Quotes from "./components/postCard";

function App() {
return (
<div className="App">
<Quotes />
</div>
);
}
export default App;

!对不起我的英语

Answer 1

这是因为您的图像链接不是链接到图像，而是链接到包含图像的页面，尝试插入以下作为第一个json元素，它应该工作:

{
"id": 1,
"name": "Product 1",
"image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png",
"price": "$20",
"description": "This is a description of Product 1"
}