CODEWITHSUNDEEP
javascriptreactjsimagee-commerce
sudhansu bhattarai
sudhansu bhattarai

Reputation: 55

Displaying alt content instead of image in React js

image not displaying

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

Upvotes: 2

Views: 8215

Answers (3)

diegoefe
diegoefe

Reputation: 41

Obviously this is skipping the problem but what about:

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

Upvotes: 0

Masudul Hasan Shawon
Masudul Hasan Shawon

Reputation: 522

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);

enter image description here

Upvotes: 0

gavgrif
gavgrif

Reputation: 15509

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

Upvotes: 1

Related Questions