Why won't React.js load the images from my disk even when the specified path is correct?

Question

I am a beginner. I was practicing and got stuck here. The path specified is correct, the name of the image on the product is right, still, it shows the error message. I am attaching the screenshots. Please let me know if anyone can help me with the issue.

ScreenshotScreenshoterrordisk

Folder structure

import product1 from '../../images/product-1.jpg';
import product2 from '../../images/product-2.jpg';
import product3 from '../../images/product-3.jpg';

export const productData = [
  {
    img: product1,
    alt: 'Game',
    name: 'Assassians Creed- Valhalla',
    desc: 'Assassins Creed Valhalla is a 2020 action role-playing video game developed by Ubisoft Montreal and published by Ubisoft.',
    price: '3,444',
    button: 'Add to cart'
  },

  {
    img: product2,
    alt: 'Game',
    name: 'Cyber Punk- 2077',
    desc: 'Cyberpunk 2077 is an action role-playing video game developed and published by CD Projekt.   ',
    price: '2999',
    button: 'Add to cart'
  },

  {
    img: product3,
    alt: 'Game',
    name: 'Metro Exodus',
    desc: 'Metro Exodus is a first-person shooter video game developed by 4A Games and published by Deep Silver.',
    price: '2199',
    button: 'Add to cart'
  }

];````

Answer 1

Your code, data.js, is looking for files inside a directory "../../images", which does not exist in your folder structure. What does exist is "../../Images".