Как проверить через JS загрузилось ли изображение?

В React есть несколько способов проверить, загрузилось ли изображение с помощью JavaScript. Рассмотрим несколько подходов:

1. Событие "onload": В стандартном JavaScript есть событие "onload", которое срабатывает, когда изображение загружено. Мы можем использовать это событие в React, добавив его в JSX элемент изображения. Вот пример:

import React, { useState } from 'react';

const ImageComponent = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const handleImageLoad = () => {
    setIsLoaded(true);
  };

  return (
    <div>
      {isLoaded ? (
        <img src="path_to_image" onLoad={handleImageLoad} alt="Image" />
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

export default ImageComponent;

В этом примере мы используем состояние useState для отслеживания загрузки изображения. Когда изображение будет загружено, сработает обработчик handleImageLoad и установит значение isLoaded в true.

2. Событие "onerror": Кроме события "onload", у изображения также есть событие "onerror", которое срабатывает, когда изображение не может быть загружено. Мы можем использовать это событие, чтобы определить, не удалось ли загрузить изображение. Вот пример:

import React, { useState } from 'react';

const ImageComponent = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isError, setIsError] = useState(false);

  const handleImageLoad = () => {
    setIsLoaded(true);
  };

  const handleImageError = () => {
    setIsError(true);
  };

  return (
    <div>
      {isLoaded ? (
        <img
          src="path_to_image"
          onLoad={handleImageLoad}
          onError={handleImageError}
          alt="Image"
        />
      ) : isError ? (
        <div>Error loading image!</div>
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

export default ImageComponent;

В этом примере мы используем два состояния useState - isLoaded и isError. Когда изображение загружается успешно, сработает обработчик handleImageLoad и установит isLoaded в true. Если происходит ошибка загрузки, сработает обработчик handleImageError и установит isError в true.

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