Solucionado
Estou com dificuldade em adicionar uma imagem padrão caso a imagem esteja quebrada ... pensei em utilizar o onError (atributo direto da imagem) e chamar um novo src, porém o src está linkado em uma props.imagem que por sua vez não é alterada se não for pelo setImagem..., como poderia implementar essa ideia ?
hoje, com a Alura e o Google Gemini
Olá Guilbert!
Uma solução seria utilizar a propriedade onError da tag img e chamar uma nova imagem caso ocorra um erro ao carregar a imagem original.
Para implementar essa solução, você pode criar uma função que altere o estado da imagem caso ocorra um erro e, em seguida, passar essa função como valor da propriedade onError da tag img. Por exemplo:
import React, { useState } from "react";
function App() {
const [imagem, setImagem] = useState("imagem-original.jpg");
const carregarImagemPadrao = () => {
setImagem("imagem-padrao.jpg");
};
return (
<div>
<img src={imagem} onError={carregarImagemPadrao} />
</div>
);
}
export default App;Nesse exemplo, a função carregarImagemPadrao é chamada caso ocorra um erro ao carregar a imagem original. Essa função altera o estado da imagem para a imagem padrão que você deseja exibir.
Espero ter ajudado e bons estudos!
Então o que me deixa em duvida é que ele ja recebe uma {imagem} do props ... eu tentei passar o setImagem mas parece que não pode passar o setImagem pro componente filho, consegui realizar com uma validação feita no component form.