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

Reactjs – Display images in using mapping in React

I am creating a simple movie website using React, the details such as name, genre, description e.t.c all are displayed except for the movie image which is provides in the movie_data.js file. How do I solve this and what could be the issue?
movie_data.js file:

export default [
    {
        id: 1,
        name: "Oppenheimer",
        image:"../images/opennheimer.jpg",
        description: "The story of J. Robert Oppenheimer’s role in the development of the atomic bomb during World War II.",
        Genre: "Biography, Drama, History",
        Actor: "Cillian Murphy, Emily Blunt, Robert Downey Jr",
        Director: "Christopher Nolan",
        Country: "United States, United Kingdom"
    }
]

movie_component.js file:

function MovieComponent(prop)
{
    return (
        <div className="movie-container">
            <img src={prop.items.image} alt={prop.items.name}/>
            <h2>{prop.items.name}</h2>
            <p>{prop.items.description}</p>
            <p>{prop.items.Genre}</p>
            <p>{prop.items.Actor}</p>
            <p>{prop.items.Director}</p>
            <p>{prop.items.Country}</p>
        </div>
    )
}

movie_app.js file:

function MovieApp()
{
    const movieElements = movie_data.map(function(dataItems){
        return <MovieComponent id={dataItems.id} items={dataItems}/>
    })
    return (movieElements)
}

I expected the images for each movie to be displayed, however I only get text details.

Tags:

2

Answers


  1. 0

    You can solve this issue using ES5 require property like below. but make sure to set the correct path of image relative to your component directory.

    function MovieComponent(prop) {
    return (
        <div className="movie-container">
            <img src={require(prop.items.image)} alt={prop.items.name}/>
            <h2>{prop.items.name}</h2>
            <p>{prop.items.description}</p>
            <p>{prop.items.Genre}</p>
            <p>{prop.items.Actor}</p>
            <p>{prop.items.Director}</p>
            <p>{prop.items.Country}</p>
        </div>
    )
}
    Login or Signup to reply.
  2. 0

    I think your path is not resolving correctly. You can get this solved in two ways:

    1. Import your image into the component or the file where the movies dataset is imported from:
    import opennheimerImg from "../images/opennheimer.jpg"

export const movies = [
    {
        id: 1,
        name: "Oppenheimer",
        image: opennheimerImg,
        description: "The story of J. Robert Oppenheimer’s role in the development of the atomic bomb during World War II.",
        Genre: "Biography, Drama, History",
        Actor: "Cillian Murphy, Emily Blunt, Robert Downey Jr",
        Director: "Christopher Nolan",
        Country: "United States, United Kingdom"
    }
]
    1. You can move your images folder into the public folder and reference it from the root.
    export const movies = [
    {
        id: 1,
        name: "Oppenheimer",
        image: "/images/opennheimer.jpg",
        description: "The story of J. Robert Oppenheimer’s role in the development of the atomic bomb during World War II.",
        Genre: "Biography, Drama, History",
        Actor: "Cillian Murphy, Emily Blunt, Robert Downey Jr",
        Director: "Christopher Nolan",
        Country: "United States, United Kingdom"
    }
]

    I’m sure both of these solutions would work for your use-case.

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

Back To Top
Search