反应，将图像从 this.state 传递给组件答案

【问题标题】：React, passing image from this.state to component反应，将图像从 this.state 传递给组件
【发布时间】：2018-11-12 15:23:52
【问题描述】：

嘿嘿，因为我是 React 的初学者。我无法显示从状态传递到组件的图像。

App.js

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

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

工作.jsx

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

标题显示没有任何问题，但没有出现图像。需要用其他方式绑定吗？？？

【问题讨论】：

Hej，pokazałabyś cały kod komponentów，bo z tego za wiele nie wynika

标签： image reactjs properties state display

【解决方案1】：

首先，状态必须这样写：

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

现在 work.js 将包含以下代码：

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

【讨论】：

【解决方案2】：

你的状态是你在问题中给出的还是那样的？

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

至少您应该看到图像的路径。但是，如果你想看到图片，你需要使用<img>。

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

【讨论】：