IMG Dom elements gets error even before connect()

[chaodoze]

My Rails app uses Twitter avatars. I’m using stimulusjs to refresh a twitter image avatar whenever the previous avatar url fails. However, it looks like the image onerror() event is happening even before connect() is called on the StimulusJs controller.

I am including the stimulusjs controllers in the page and prepackaged via rails webpack. Any idea, how to get stimulusjs to be called earlier? or Stimulus unable to cater for this use case?

Thanks!

[adrienpoly]

maybe this thread and this particula comment can help

Onload event with <img>

If the <img> element has already loaded when its controller connect()s then you’ve missed the load event. Following @dnwilson’s lead, something like this should work: <img src="…" data-controller="image" data-action="load->image#process"> // image_controller.js export default class extends Controller { connect() { if (this.isLoaded) { this.process() } } process() { // … } get isLoaded() { return this.element.complete } }