Question

我有一个使用Create-React-App创建的react应用程序。我的目标是当用户点击图像时，图像会发生变化。所以，我希望图像来自道具。

由于某种原因，此代码不起作用。

<img alt="mug shot" src={this.props.photo} />

然而，这有效

<img alt="mug shot" src={require('../../Assets/Photos/Four.png')}/>

我在这里做错了什么？

Answer 1

我假设您正在使用Webpack捆绑您的应用。可能您可能正在使用文件加载器/ url-loader来处理图像。因此，当您需要以图像文件扩展名结尾的内容时，webpack会通过此加载程序运行该文件的内容。有关详细信息，请查看https://survivejs.com/webpack/loading/images/

Answer 2

class App extends React.Component {

constructor(props) {
  super(props);
  this.state = {
    img:'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg'
  }

  this.changeImg = this.changeImg.bind(this);
}

changeImg() {
  this.setState({
    img:'http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg'
  })
}

  render() {
    return(
      <div>
        <ImageChande change={this.changeImg} src={this.state.img} />
      </div>
    );
  }
}


class ImageChande extends React.Component {
  render() {
    return(
      <div>
        <img onClick={this.props.change} alt="something" src={this.props.src} />
      </div>
    );
  }
}

从this.props

2 个答案: