Mi código

import React, { Component } from 'react'; import './App.css'; class App extends Component { state = { loaded: false, error: false } onImageLoad = () ={amp}gt; { this.setState({ loaded: true }) } onImageError = () ={amp}gt; { this.setState({ error: true }); } render() { // let imgSrc = (!error) ? src: fallbackSrc return ( {amp}lt;div{amp}gt; {amp}lt;img src= {'https://unsplash.com/photos/wQLAGv4_OYs'} alt={'Wresting Character'} onLoad={() ={amp}gt; this.onImageLoad()} onError={require('../src/images/batista.jpg')} /{amp}gt; {amp}lt;/div{amp}gt; ) } } export default App; 

Quiero mostrar la imagen alternativa si la url está rota. En este momento se muestra la imagen predeterminada, pero si cambio la URL, la página arroja un error. ¿Cómo puedo mostrar la imagen ficticia en caso de que mi enlace esté roto?

Puede recurrir a la imagen predeterminada una vez que se produce el error:

 onImageError = (ev) ={amp}gt; { this.setState({ error: true }); ev.target.src = 'some default image url'; } 

Prefiero usar el atributo onerror en la etiqueta img . Puede definir un controlador para el error y reemplazar el atributo de origen de destino con su URL de reserva.