CODEWITHSUNDEEP
imagereactjspropertiesstatedisplay
kasia
kasia

Reputation: 298

React, passing image from this.state to component

Hej, As I'm beginner in React. I have a problem of displaying my image passed from state to component.

App.js

this.state = {
    projects: [
    title: 'xxx',
    image: require(../src/img/landscape.jpg)
    ]
}

<Works projects={this.state.projects}/>

Work.jsx

{this.props.project.title}
{this.props.project.image}

Title is displaying without any problems but image doesnt appear. Do I need to bind it in another way???

Upvotes: 0

Views: 2711

Answers (2)

Mayank Yadav
Mayank Yadav

Reputation: 41

First of all, the state must be written like this:

state = {
    projects: [
        { title: 'xxx',
          image: require("../src/img/landscape.jpg")
        }
    ]
}

now the work.js will contain the following code:

<div>
    {this.state.projects.map((item, index) => {
        return (
            <div key={index}>
                <p>{item.title}</p>
                <img src={item.image} />
            </div>
        )})
    }
</div>

Upvotes: 1

devserkan
devserkan

Reputation: 17598

Is your state like that you gave in your question or is it like that?

state = {
    projects: [
      {
        title: "xxx",
        image: require( "../src/img/landscape.jpg" ),
      },
    ],
  }

With your code at least you should see the path of the image. But, if you want to see the image you need to use <img>.

<div>
    {
      props.projects.map( project => (
        <div>
          <p>{project.title}</p>
          <img src={project.image} />
        </div>
      ) )
    }
</div>

Upvotes: 0

Related Questions