Как назначить источник тега img для состояния компонента?

Question

У меня есть реактивный проект, где у меня есть компонент, который в настоящее время показывает изображение. Также есть кнопка:

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?

html reactjs web-component

0

chris56tv 28 Окт 2019 в 07:51

Answer 1

Попробуйте вместо этого:

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

Или это:

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

Так как require требуется строка, поэтому вы не можете передать необработанное значение

3

Jayce444 28 Окт 2019 в 05:20

Answer 2

Все, что вам нужно сделать, это использовать значение состояния в качестве значения img src, я переименовал переменную состояния извините, но мой OCD не мог допустить, чтобы она была просто «текстовой»: 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;

0

Jon B 28 Окт 2019 в 05:14

Как назначить источник тега img для состояния компонента?

2 ответа

Похожие вопросы

Новые вопросы

html