How to dynamically load an image in react

Question

How can I correctly load this image?

import image_1 from "../../static_media/1.png"

handleClick = async (e) => {
    
    this.loadImage({
        "0": {
            name: "1.png",
            image: image_1,
            backend_address: await fetch(image_1).then(res => res.blob())
        }})
    }

When I do console.log(this.state.files[0])

I get

backend_address: Blob {size: 736023, type: 'image/png'} image: "/static/media/1.46b58831.png" name: "1.png" [[Prototype]]: Object

When I do the following

<Image src={this.state.files[0].image} />

I get

TypeError: Cannot read properties of undefined (reading 'image')

Alen Vlahovljak · Accepted Answer · 2021-11-29 13:22:47Z

1

Try this:

  <Image src={this.state.files[0]?.image} />

answered Nov 29, 2021 at 13:22

Alen Vlahovljak

5746 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically load an image in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related