How do I pass the "img" object to an onload event handler in ReactJS JSX?

Question

I am creating an img tag that i want to listen to the onLoad event for, but I also need the actual image object so i can check width/height, etc on it. These are created dynamically, so I can't know the id beforehand.

//In the JSX:
<img src={this.generateSrc(config)} onLoad={this.handleOnLoad} />

In normal javascript, I could do:

<img onload="someFunction(this)" />

How do I pass that in ReactJS?

Haibara Ai · Accepted Answer · 2016-09-02 02:48:39Z

2

You could get actual image object via e.target.

handleOnLoad(e) {
    console.log(e.target);
}

Or via Refs to Component

handleOnLoad() {
    console.log(this.refs.img);
}

<img ref='img' src={this.generateSrc(config)} onLoad={this.handleOnLoad.bind(this)} />

edited Sep 2, 2016 at 2:48

answered Sep 2, 2016 at 2:14

Haibara Ai

10.9k2 gold badges35 silver badges49 bronze badges

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

4 Comments

Don Rhummy Over a year ago

Safari and Firefox don't pass an event to that callback

Haibara Ai Over a year ago

@DonRhummy, sorry I didn't test that. Or you could set a ref in img and retrieve it via this.refs.img

Don Rhummy Over a year ago

it creates hundreds of them dynamically, not just one

eballeste Over a year ago

not true, safari and firefox both register the target of the onload event of an image

eballeste · Accepted Answer · 2018-02-22 22:19:13Z

0

future javascript allows you to do:

handleOnLoad = (e) => {
  console.log(e.target);
}

<img src={imgSrc} onLoad={this.handleOnLoad} />

edited Feb 22, 2018 at 22:19

answered Feb 22, 2018 at 18:51

eballeste

9942 gold badges15 silver badges26 bronze badges

Collectives™ on Stack Overflow

How do I pass the "img" object to an onload event handler in ReactJS JSX?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related