Not able to display images in tag in Reactjs when i have images in Array of objects

Question

I am unable to display images in img tag in Reactjs

<ul className="products">
      {products.map((product) => (
        <li key={product._id}>
          <div className="product">
            <Link to={"/product/" + product._id}>
              <img className="product-image" src={product.image} alt="product" />
            </Link>
            <div className="product-name">
              <Link to={"/product/" + product._id}>{product.name}</Link>
            </div>
            <div className="product-brand">{product.brand}</div>
            <div className="product-price">${product.price}</div>
            <div className="product-rating">
              {product.rating} Stars ({product.numReviews} Reviews)
            </div>
          </div>
        </li>
      ))}
    </ul>

Every other data like product.name, product.price etc is getting displayed but problem lies with product.image .

The above pic shows my products array.

The above pic shows each component the page

Where are your images? (For the approach you're using they should be in `public`) — Nathan Chu, Dec 02 '20 at 20:58
I have my images in the same folder in which i have my js file @nthnchu — Abhijeet Gupta, Dec 02 '20 at 21:04
@nthnchu if I write code `import Img from './d1.jpg' ` and write `src={Img}` its working. — Abhijeet Gupta, Dec 02 '20 at 21:08
That's because setting the src doesn't automatically import them. — Nathan Chu, Dec 02 '20 at 21:09
Does this answer your question? [How to give Image src dynamically in react js?](https://stackoverflow.com/questions/54033765/how-to-give-image-src-dynamically-in-react-js) — Nathan Chu, Dec 02 '20 at 21:15
@nthnchu this is working for the code that i shared to you. But for another code in the same folder this is not working. — Abhijeet Gupta, Dec 02 '20 at 21:58

score 0 · Answer 1 · answered Dec 02 '20 at 21:14

These issue appears since React is using webpack as bundler by default. When using assets with the bundler you should provide the image path with require('...') or directly import the asset as a module with import

In your case <img className="product-image" src={product.image} alt="product" /> should be changed to
<img className="product-image" src={require(product.image)} alt="product" /> or you should restructure your array of objects so that the product.image is a valid path.

I would suggest changing the place where the images are stored to a separate asset folder for a clearer structure instead of referring to them from the root folder

Not able to display images in tag in Reactjs when i have images in Array of objects

1 Answers1