Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I cant reach image with using JSON file

My code fails to show the image from db.json.
Image information is loeaded but the image is not displayed.

See this screenshot of my page

What could be the cause?

  • I assume the image information is in the json file, not the js file, am I right?

I thought it could be pulled from the js file

  • and tried ../../img/clothing/etc.webp
  • and tried ../../img/giyim/etc.webp

I also tried to change file location (see screenshot of the file paths). But the images are still not loaded / displayed.

<div className="products">
          <div className="product-wrapper">
            {this.props.products.map((product) => (
              <div className="product" key={product.id}>
                <img src={product.image} alt={product.id}></img>
                {/* <div>{product.id}</div> */}
                <div>
                  <Link to={"/saveproduct/" + product.id}>
                    {product.productName}
                  </Link>
                </div>
                <div>{product.unitPrice}</div>
                {/* <td>{product.quantityPerUnit}</td>
                <td>{product.unitsInStock}</td> */}
                <span>
                  <Button color="info" onClick={() => this.addToCart(product)}>
                    Sepet
                  </Button>
                </span>
              </div>
            ))}
          </div>
        </div>

{
  "products": [
    {
      "id": "bicak1",
      "productName": "FleshEdge Bıçak N690 ... Suya Dayanıklı",
      "categoryId": 1,
      "unitPrice": "5699",
      "image": "img/giyim/soft-set2.webp",
      "quantityPerUnit": "30",
      "unitsInStock": "31"
    }
  ],
  "categories": [
    {
      "id": "1",
      "categoryName": "Bıçaklar",
      "seoUrl": "bicaklar"
    }
  ]
}
Tags:

2

Answers


  1. 0

    1. Try adding a / before the path to the image. So, /img/giyim/soft-set2.webp in the db.json file.

    2. It is better to use environment variables by adding the images in the public folder and use the %PUBLIC_URL% variable which will automatically include the path to the public directory. Have a look here – Using Public Folder

    Also, as a general rule, you should store all your assets like fonts, images, etc in the public folder

    Login or Signup to reply.
  2. 0

    If you use Image path directly in the src then it should be present in the public folder for example <img src='./product.png' alt={product.id}></img>
    , In this case product.png should be in public folder.

    If you want to use image like this <img src={product} alt={product.id}></img> then first you need import it.

    for example if image is in the ./assets/images folder you need to import like this import product from './assets/images/product.png'; and then you can use it directly like this <img src={product} alt={product.id}></img>

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search