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" onm ouseover="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

CodePudding user response：

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