Displaying alt content instead of image in React js

Question

function ProductScreen(props) {
const product = data.products.find((x) => x._id === props.match.params.id)
 
<div className="col-2">
                <img className="large" src={product.image} alt={product.name}/>
            </div>

I'm trying to render the image of specific id but only alt attribute is being displayed. Can anyone help me with it. Thankyou

Just console the product and check whether img key has value or not. Suggestion: Best practice is to provide a fallback — Ragul CS, Dec 14 '20 at 07:04

gavgrif · Answer 1 · 2020-12-14T05:03:36.607

1

You might need to use require()...in order for react to process it.

<img className="large" src={require(product.image)} alt={product.name}/>

The other way of doing it is importing the image into a variable and referencing that in your {src}. A quick search yields many results -

Following is from https://stackoverflow.com/a/32613874/5867572

  const imgSrc= './image1.jpg';
  return <img src={imgSrc} />

Following is from https://stackoverflow.com/a/35454832/5867572

  import LogoImg from 'YOUR_PATH/logo.png';
  <img src={LogoImg}/>

edited Dec 14 '20 at 05:03

answered Dec 14 '20 at 04:27

gavgrif

15,194
2
25
27

saying Error: cannot find module './imagePath' – sudhansu bhattarai Dec 14 '20 at 04:33
thankyou so much for your response but it didn't solve the issue – sudhansu bhattarai Dec 14 '20 at 04:50
Sorry - one thought - are you sure that your relative path to the image is correct - - it needs to be pointing the img src to the right directory. – gavgrif Dec 14 '20 at 04:51
Yes it is correct because in homepage all the images are rendering properly but when i click on specific product image alt attribute is being rendered – sudhansu bhattarai Dec 14 '20 at 04:54

score 0 · Answer 2 · edited Dec 14 '20 at 06:57

0

Console log the product and see if your image URL is okay, you'll get more idea why it's not displaying

const product = data.products.find((x) => x._id === props.match.params.id)
console.log(product);

edited Dec 14 '20 at 06:57

wscourge

10,657
14
59
80

answered Dec 14 '20 at 06:03

Masudul Hasan Shawon

502
3
14

sure here it is – sudhansu bhattarai Dec 14 '20 at 06:18
okay can you do one more things? just inspect the image and see the full url of the image. and then copy the url and paste it in a new window. does it works? if not then may be "./" is the problem. image name "images/p1.jpeg" may solve the issue instead of "./images/p1.jpeg" – Masudul Hasan Shawon Dec 14 '20 at 06:25
can you please mark the answer as resolved! thanks. :) – Masudul Hasan Shawon Dec 14 '20 at 06:46

score 0 · Answer 3 · answered Mar 22 '22 at 10:46

0

Obviously this is skipping the problem but what about:

<div className="col-2">
  <img className="large" src={product.image} title={product.name}/>
</div>

answered Mar 22 '22 at 10:46

diegoefe

41
2

Displaying alt content instead of image in React js

3 Answers3