Question 227963 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can i get local image to load in react while bringing the path from an object attribute

i want to load an image locally stored

export const dataJeuxGrosLot = [
{
    id: 1,
    title: 'Jeu Spécial Noel',
    price: '$59.99',
    prize: '$3000.99',
    startDate: new Date(2023, 2, 20, 15, 30, 12), // (yyyy, mm, dd, hh, mm, ss)
    endDate: new Date(2023, 2, 30, 23, 59, 59), // (yyyy, mm, dd, hh, mm, ss)
    drawDate: new Date(2023, 3, 1, 12, 0, 0), // (yyyy, mm, dd, hh, mm, ss)
    linkImg:
        '../../images/halloween.jpg',
}]

i’m trying to load the image plus the other attribures like so:

{dataJeuxGrosLot.map(item => (
                    <div className="card">
                        <div className="card-top">
                            <img src={item.linkImg} alt={item.title}/>
                            <h1>{item.title}</h1>
                        </div>
                        <div className="card-bottom">
                            <h3>{item.price}</h3>
                            <h3>{item.startDate.toLocaleString()}</h3>
                            <span className="category">{item.prize}</span>
                        </div>
                    </div>

                ))}

But image dosen’t load and shows alt value any suggestions

Tags:

2

Answers


  1. 0

    Depending on what particular react framework or bundler you are using you’ll likely have to import the images manually first and assign it to the linkIMG property of an item in your dataJeuxGrosLot array. Otherwise the image will not be included in the project once you build it and cannot be found.

    import halloween from "../../images/halloween.jpg";

export const dataJeuxGrosLot = [
  {
    id: 1,
    title: "Jeu Spécial Noel",
    price: "$59.99",
    prize: "$3000.99",
    startDate: new Date(2023, 2, 20, 15, 30, 12),
    endDate: new Date(2023, 2, 30, 23, 59, 59),
    drawDate: new Date(2023, 3, 1, 12, 0, 0),
    linkImg: halloween
  }
];
    Login or Signup to reply.
  2. 0

    you can do it like this:

    dataJeuxGrosLot array is part of a React component, you can render the images using the require function to load the images from their relative paths:

    <img src={require(${item.linkImg}).default} alt={item.title} />

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search