Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React is not rendering .png photos on browser

I am working on small garage app, I am not apple to get the cars photos rendered in the browser.

I just get the placeholder on an image

snapchot of the error ](https://i.sstatic.net/4adtr4xL.png)

` import React from ‘react’;

function Products() {

   const cars = [
    { id: 1, name: 'Toyota Camry', price: 25000, img: '../assets/images/toyota_camry2023.png'     },
    { id: 2, name: 'Honda Civic', price: 27000, img: '../assets/images/honda_civic2023.png' },
    { id: 3, name: 'Ford Mustang', price: 35000, img: '../assets/images/ford_mustang2023.png'  },
]

   return (
       <div>
          <h2>Find The Best Deals</h2>
          <h2>Available Cars</h2>
          `<ul>{
          cars.map(car => (
            <li key={car.id}>
            <img src={car.img} alt={car.name}/>
                <h3>{car.name}</h3>
                <p>Price: ${car.price}</p>
                <button>More details</button>
            </li>
          ))
        }</ul>

        
    </div>
)

}

export default Products;“

Tried all solutions previously provided in Stackoverflow about a similar issue but it did not work
enter image description here

Tags:

2

Answers


  1. 0

    Use import toyota from '../assets/toyota.png'

    const cars = [{ …car, img: toyota }]

    or add files in public folder and use absolute path from public folder.

    Login or Signup to reply.
  2. 0 
    import React from 'react';

function Products() {
  const cars = [
    { id: 1, name: 'Toyota Camry', price: 25000, img: require('../assets/images/toyota_camry2023.png').default },
    { id: 2, name: 'Honda Civic', price: 27000, img: require('../assets/images/honda_civic2023.png').default },
    { id: 3, name: 'Ford Mustang', price: 35000, img: require('../assets/images/ford_mustang2023.png').default },
  ];

  return (
    <div>
      <h2>Find The Best Deals</h2>
      <h2>Available Cars</h2>
      <ul>
        {cars.map(car => (
          <li key={car.id}>
            <img src={car.img} alt={car.name} />
            <h3>{car.name}</h3>
            <p>Price: ${car.price}</p>
            <button>More details</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Products;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search