Question

我有一个带有以下html的图像组件：

<img src={this.state.img_path} onClick={this.getNew} alt={this.state.alt} width={150} />

最初我将图像设置为空白，我从图像导入：

从＆＃39; ./ images / blank.jpg＆＃39;;

导入空白

然后我使用Blank来初始化我的状态变量。

单击图像时，会调用getNew，我将状态变量img_path设置为相对图像路径：

this.setState({img_path: item.ImgPath, alt: item.alt});

函数getNew在没有问题的情况下被调用，并且在没有错误的情况下执行，但图像不会显示，只显示图标和alt值。如何在React中进行动态图像源切换？

更新

这是我的班级

import React, { Component } from 'react';

import Blank from './images/blank.jpg';



class myImg extends Component {


    constructor(props) {

    super(props);

    this.state = {

        img_path: Blank,

        alt: 'blank',   
    };


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



getNew() {

    const items = [{ItemName: 'test1', ItemImg: './images/test1.jpg'}, {ItemName: 'test2', ItemImg: './images/test2.jpg'} ];

    var item = items[math.floor(Math.random() * items.length)]; 
    this.setState({ img_path: item.ItemImg,
            alt: item.ItemName });
  }

 render() {
     return (<div>
            <img src={this.state.img_path} onClick={this.getNew} alt={this.state.alt} width={150} />

        </div>);

}

}

export default myImg;

Answer 1

我想出了解决方法。我用了require。起初它没有用，但后来我将图像路径状态变量包装在${}中。基本上我改变了

<img src={this.state.img_path} onClick={this.getNew} alt={this.state.alt} width={150} />

到

<img src={require(`${this.state.img_path}`)} onClick={this.getNew} alt={this.state.alt} width={150} />

让图像显示

如何使用状态变量和React.js更改图像源

1 个答案: