React – Can't display Image passed through react component props

All we need is an easy explanation of the problem, so here it is.

React newbie here.

How can i display the image from the react component CheckoutProduct props in within the image html tag.

Picture showing failed image display of the Product item

Here is the code

import React from 'react';
import './CheckoutProduct.css'
import { useStateValue } from "./StateProvider";

function CheckoutProduct({id, image, title, price, rating}) {
  const [{ basket }, dispatch] = useStateValue();  

  return (
    <div className='checkoutProduct'>
        <image className='checkoutProduct__image' src={image}/>

          <div className='checkoutProduct__info'>
              <p className="checkoutProduct__title">{title}</p>
                <p className="checkoutProduct__price">
                <div className="checkoutProduct__rating">
                    {Array(rating).fill().map((_, i) => (<p>🌟</p>))}
              <button>Remove from Basket</button>

export default CheckoutProduct

The rest of the code is here

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

change the <image> tag to <img/>.

<image/> wont work as it’s not the correct one.

<img className='checkoutProduct__image' src={image}/>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

Leave a Reply