Определить, когда загружается реагирующее изображение

Question

У меня есть компонент React для рендеринга настроенных изображений. В упрощенном виде это выглядит так:

function MyImage(props) {
  return <img src={props.src} onLoad={props.onLoad} />
}

Веб-страница предоставлена ​​сервером ReactDOMServer и <img> элементы (намеренно) уже присутствуют в исходном документе HTML. Однако их onLoad обработчики событий нет. Я считаю, что это особенность ReactDOMServer,

Иногда может случиться так, что некоторые из настроенных изображений, особенно меньшие, могут завершить загрузку до загрузки JavaScript или до его запуска или, по крайней мере, до того, как React настроит onLoad обработчики событий. В результате onLoad события на этих изображениях не вызывают вызов каких-либо обработчиков событий.

Есть ли способ гарантировать, что onLoad обработчики событий, которые устанавливаются в React-рендеринге <img> элементы, всегда будут вызываться после завершения загрузки базовых изображений?

Мои самые важные ограничения заключаются в том, что я хотел бы использовать React, а отображаемая на сервере HTML-страница должна содержать <img> элементы с их src атрибуты правильно установлены.

Answer 1

Вы можете переместить onLoad обработчики к componentDidMount() метод. См документы