Как убрать картинку которая не отображается?

Question

[Giunai]

Я получаю данные о разных фильмах по Апи и вывожу их в ленту, пример как это выглядит:


Как видно на фото прилично картинок не отображается и мне необходимо их как-то убрать из ленты.

Данные получаю таким образом:

const [movies, setMovies] = useState([]);

  useEffect(() => {
    axios.get(fetchURL).then((res) => {
      setMovies(res.data.results);
    });
  }, [fetchURL]);

Answer 1

[Владимир Шаблий]

Грузите заглушку в error-e 404.

Comments

[Giunai]

Вы имете ввиду в блоке try/catch ?

[Владимир Шаблий]

Ну да. Или используйте атрибут onerror img. А если надо убрать саму рамку - в catch просто удаляйте элемент.

[Giunai]

Владимир Шаблий, я сделал так:

const [showImage, setShowImage] = React.useState(true);

const hideImg = (e: any) => {
    setShowImage(false);
  };

{showImage ? (
        <img
          src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`}
          alt={item?.title}
          onError={hideImg}
        />
      ) : null}

Но естественно рамка не удаляется.

А если надо убрать саму рамку - в catch просто удаляйте элемент.

- а как выполнить удаление в catch? Не совсем понимаю

React.useEffect(() => {
    try{
      axios.get(fetchURL).then((res) => {
        setMovies(res.data.results);
      });
    }catch(e){
      //Удаление элемента
    }
  }, [fetchURL]);

Answer 2

[Stalker_RED]

Делайте для каждой new Image(),
Вешайте обработчик на load, и если загрузилась успешно, только тогда добавляйте в DOM.
Этакий lazyload, можно ещё и intersectionobserver приладить, чтоб не пытаться грузить картинки за пределами вьюпорта.

Comments

[Giunai]

Можно пример? Не совсем понимаю как это реализовать.

<img
          src={`https://image.tmdb.org/t/p/original/${movie?.backdrop_path}`}
          alt={movie?.title}
        />