react.js Reemplazar img src onerror

Solución:

Esto funciona mejor para mi

<img src={record.picture} onError={(e)=>{e.target.onerror = null; e.target.src="https://foroayuda.es/image_path_here"}}/>

Como no hay una respuesta perfecta, estoy publicando el fragmento que utilizo. Estoy usando reutilizable Image componente que recurre a fallbackSrc.

Dado que la imagen de respaldo podría fallar nuevamente y desencadenar un bucle infinito de renderizado, agregué errored estado.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Image extends Component {
  constructor(props) {
    super(props);

    this.state = {
      src: props.src,
      errored: false,
    };
  }

  onError = () => {
    if (!this.state.errored) {
      this.setState({
        src: this.props.fallbackSrc,
        errored: true,
      });
    }
  }

  render() {
    const { src } = this.state;
    const {
      src: _1,
      fallbackSrc: _2,
      ...props
    } = this.props;

    return (
      <img
        src={src}
        onError={this.onError}
        {...props}
      />
    );
  }
}

Image.propTypes = {
  src: PropTypes.string,
  fallbackSrc: PropTypes.string,
};

Puede utilizar un componente no controlado:

<img src={this.state.img} ref={img => this.img = img} onError={
    () => this.img.src="https://foroayuda.es/img/default.img"
}>

---

---

Utiliza Nuestro Buscador