Por ejemplo, tengo:
<img className="article_link_image" src={article.image}></img>También tengo algo de JavaScript de la siguiente manera en un archivo separado, que detecta un error de imagen y devuelve el src que pasa o un src predeterminado.
const image = new Image(); function testImage(url, className) { image.onload = imageFound; image.onerror = imageNotFound; image.class = className; image.src = url; } function imageFound() { return image.src; } function imageNotFound() { return '/generic.png' } testImage('http://example.com/image.png'); module.exports = testImage;Sin embargo, testImage es asíncrono, y no sé si es posible 'conectarlo' a React
Prueba algo como esto
export default function App() { const imgToRender = 'https://wrong.com' const imgNotFound = 'https://placekitten.com/g/200/300' return ( <div> <img src={imgToRender} alt="" onError={e => { e.currentTarget.src = imgNotFound }} /> </div> ) }o para probar algo mas adelantado
import { ImgHTMLAttributes } from 'react' export default function App() { return ( <div> <Img src="https://wrong.com" notFoundSrc="https://placekitten.com/g/200/300" /> </div> ) } interface ImgProps extends ImgHTMLAttributes<HTMLImageElement> { notFoundSrc?: string } function Img(props: ImgProps) { return ( <img {...props} onError={e => { props?.onError?.(e) if (!props.notFoundSrc) return e.currentTarget.src = props.notFoundSrc }} /> ) }