Como detectar imagens quebradas

O problema

Lidamos com muitas imagens em projetos web e muitas vezes esquecemos de tratar quando a foto está com algum problema de referência, link quebrado ou até uma imagem que depende da gestão do usuário (onde o mesmo não adicionou ou excluiu a mesma).

Exemplo de imagem quebrada

Exemplo de como uma imagem é exibida no navegador sem tratamento de erros:

Soluções

1) Tag <img> no HTML

A solução mais simples é se a imagem estiver sendo renderizada em uma tag <img>

Basta adicionar a propriedade onerror abaixo e o caminho da imagem que será renderizada caso a principal esteja com problema


<img src="logo.png" onerror="this.onerror=null;this.src='https://placehold.co/200x100';">

2) Background-image no CSS

Se a imagem estiver sendo renderizada via CSS com a propriedade background-image também podemos adicionar uma foto alternativa para substituir a que está quebrada:


<div class="bg">Imagem como background</div>


.bg {
  width: 200px;
  height: 100px;
  background-image: url('image-broken.png'), url('https://placehold.co/200x100');
  background-size: cover;
  background-repeat: no-repeat;
}

3) Imagem no React

Exemplo de como adicionar a imagem de fallback para um componente <img> no React:


<img
  src="/assets/logo.png"
  alt="Logo do cliente"
  onError={(e) => {
    e.target.onerror = null
    e.target.src = '/assets/logo-fallback.png'
  }}
/>

4) Componente React com background

Exemplo de background image para um componente MUI Box (React JSX):


import React from "react";

export default function Image() {
  const imgBroken = "/assets/image-broken.png";

  return (
    <Box
      width={200}
      height={100}
      sx={{
        background: `url(${imgBroken}), url("/assets/img-fallback.svg")`,
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
      }}
    />
  );
}

Conclusão

É isso aí, espero ter ajudado a evitar imagens quebradas em seus projetos web!