如何将 img 标签的来源指定为组件的状态？

Question

我有一个 React 项目，其中有一个当前正在显示图片的组件。还有一个按钮：

import React from 'react';

class Pokemon extends React.Component {

    state = {
        text: "./blank.png"
    };

    handleButton = (e) => {
        console.log("e: ",e);
        this.setState( {
            text: "./pikachupic.png"
        });
    };

    render() {
        return (
            <div class="container-fluid" >
                <div class="row">
                    <div class="col" style={{ background: "gray", color: "white" }}>
                        <button onClick={this.handleButton}>Show Pokemon</button>
                    </div>
                    <div class="col" style={{ background: "black", color: "white" }}>
                        <h3>Pokemon Description</h3>
                        <img src={require("./pikachupic.png")}/>
                    </div>
                </div>
            </div>
        );
    }
}

export default Pokemon;

但是我想要做的是从一张空白图片开始，只要用户点击按钮，口袋妖怪图片就会出现。所以我有一个以“./blank.png”开头的状态，一旦单击按钮，它就会变为“./pikachupic.png”。我尝试更改以下行

<img src={require("./pikachupic.png")}/>

对此：

<img src={require(this.state.text)}/>

但在我进行更改后出现错误。

错误：找不到模块'./blank.png'

将 this.state.text 的值分配给 img 标签的来源的正确语法是什么？

Answer 1

你需要做的就是使用状态值作为你的 img src 值，我重命名了状态变量抱歉，但我的强迫症不允许它只是 'text' :D

import React from 'react';

class Pokemon extends React.Component {

    state = {
        imgSrc: "./blank.png"
    };

    handleButton = (e) => {
        console.log("e: ",e);
        this.setState( {
            imgSrc: "./pikachupic.png"
        });
    };

    render() {
        return (
            <div class="container-fluid" >
                <div class="row">
                    <div class="col" style={{ background: "gray", color: "white" }}>
                        <button onClick={this.handleButton}>Show Pokemon</button>
                    </div>
                    <div class="col" style={{ background: "black", color: "white" }}>
                        <h3>Pokemon Description</h3>
                        <img src={this.state.imgSrc}/>
                    </div>
                </div>
            </div>
        );
    }
}

export default Pokemon;

Answer 2

试试这个：

<img src={require( `${ this.state.text }` )} />

或者这个：

<img src={require( "" + this.state.text )} />

因为require需要一个字符串，所以不能传入原始值

如何将 img 标签的来源指定为组件的状态？

How to assign the source of a img tag to be the state of a component?

html

web-component

reactjs