В изоморфном отображаемом изображении страницы можно загрузить перед основнымscript.js файл. Таким образом, изображение может быть загружено уже раньшеreact регистрonLoad событие - никогда не вызывать это событие.

script.js

constructor(props) {
    super(props);
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
}

handleImageLoaded() {
    console.log('image loaded');
} 

render() {
    return (
        <img src='image.jpg' onLoad={this.handleImageLoaded} />
    );
}

Сценарий 1 -image.jpg больше чемscript.js

В этом сценарии все работает нормально. Событие регистрируется до окончательной загрузки изображения, поэтому в консолиimage loaded сообщение.

Сценарий 2 -image.jpg меньше чемscript.js

В этом сценарии вы можете увидеть проблему, описанную в начале поста.onLoad Событие не вызвано.

Вопрос

Что я могу сделать, чтобы вызватьonLoad событие всценарий 2?

РЕДАКТИРОВАТЬ: Совиуть ответ реализации

Чтобы определить, готово ли изображение при рендеринге, вы должны проверитьcomplete свойство на чистом JavaScriptimg объект:

constructor(props) {
    super(props);
    this.state = { loaded: false };
    this.handleImageLoaded = this.handleImageLoaded.bind(this);
    this.image = React.createRef();
}

componentDidMount() {
    const img = this.image.current;
    if (img && img.complete) {
        this.handleImageLoaded();
    }
}

handleImageLoaded() {
    if (!this.state.loaded) {
        console.log('image loaded');
        this.setState({ loaded: true });
    }
} 

render() {
    return (
        <img src='image.jpg' ref={this.image} onLoad={this.handleImageLoaded} />
    );
}