I cannot connect image from Json file with React Js

Question

I am new with ReactJs and I cannot solve the problem to connecting image path with react from separate Json file and it is only showing image icon.
I don't understand is there problem with image path or with css code (! but I did not write css for image ^^) or another... ?

src

components -- "folder name"

postCard.js

data -- "folder name"

datastore.json

img_reactjs01 -- "folder name"

Katana.png

App.js

---

My code

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;

!Sorry for my English

Answer 1

This is because your image links are not links to images but links to pages containing images, try inserting the following as the first json element and it should work:

{
    "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"
}