Как назначить источник тега img как состояние компонента? - PullRequest
Новая
       11

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

0 голосов
/ 28 октября 2019

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

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?

Ответы [ 2 ]

3 голосов
/ 28 октября 2019

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

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

или это: 

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

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

0 голосов
/ 28 октября 2019

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