Displaying alt content instead of image in React js

Question

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

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

Answer 2

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

Answer 3

Obviously this is skipping the problem but what about:

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