CODEWITHSUNDEEP
htmlreactjsweb-component
chris56tv
chris56tv

Reputation: 167

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

I have a react project where I have a component that is currently showing a picture. There is also a button:

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;

However what I want to do is to start with a blank image, and as soon as the user clicks the button, the pokemon image shows up. So I have a state that starts with "./blank.png" and as soon as the button is clicked, it changes to "./pikachupic.png". I tried to change the following line

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

to this:

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

but it threw errors after I made the change.

Error: Cannot find module './blank.png'

What is the correct syntax to assign the value of this.state.text to the source of the img tag?

Upvotes: 0

Views: 489

Answers (2)

Jayce444
Jayce444

Reputation: 9073

Try this instead:

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

or this:

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

since require needs a string, so you can't pass in the raw value

Upvotes: 3

Jon B
Jon B

Reputation: 2834

All you need to do is use the state value as your img src value, I renamed the state variable sorry but my OCD couldn't allow it to be just '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;

Upvotes: 0

Related Questions