javascript - img - react native image uri error

react.js Replace img src onerror

Question

Tengo un componente de reacción que es la vista detallada de una lista.

Estoy tratando de reemplazar la imagen con una imagen predeterminada si la imagen no existe y hay un error 404.

Normalmente usaría el método onerror en la etiqueta img pero eso no parece estar funcionando.

No estoy seguro de cómo hacer esto con reaccionar.

Aquí está mi componente:

import React from ''react'';
import {Link} from ''react-router'';
import ContactStore from ''../stores/ContactStore''
import ContactActions from ''../actions/ContactActions'';

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = ContactStore.getState();
    this.onChange = this.onChange.bind(this); 
 }

componentDidMount() {
  ContactStore.listen(this.onChange);
  ContactActions.getContact(this.props.params.id);
}

componentWillUnmount() {
  ContactStore.unlisten(this.onChange);
}

componentDidUpdate(prevProps) {
  if (prevProps.params.id !== this.props.params.id) {
    ContactActions.getContact(this.props.params.id);
  }
}

onChange(state) {
  this.setState(state);
}

render() {
  return (
    <div className=''container''>
      <div className=''list-group''>
        <div className=''list-group-item animated fadeIn''>
          <h4>{this.state.contact.displayname}</h4>
          <img src={this.state.imageUrl} />
        </div>
      </div>
    </div>
  );
}
}

export default Contact;

Answer 1

Así es como lo hice.

 class Pix extends React.Component{

          constructor(props){
            super(props);
           this.state={link: this.props.link};
           this.onError=this.onError.bind(this);
          }


          onError(){
              console.log("error: could not find picture");
              this.setState(function(){ return {link: "missing.png"}; });
             };

          render(){
          return <img onError={this.onError} src={this.state.link}/>;
          } 
    }

Answer 2

Como no hay una respuesta perfecta, estoy publicando el fragmento que uso. Estoy utilizando un componente de Image reutilizable que se utiliza para fallbackSrc .

Dado que la imagen alternativa podría fallar de nuevo y desencadenar un bucle infinito de representación, agregué el estado de errored .

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,
};

Answer 3

Esto funciona mejor para mi

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

Answer 4

La respuesta de @ DepH es buena, pero produce un bucle infinito si su fuente de error tampoco se carga. Esto me ayudó a evitar el bucle de devolución de llamada:

onError={(e)=>{ if (e.target.src !== "image_path_here") 
    { e.target.onerror = null; e.target.src="image_path_here"; } }}

Answer 5

Para aquellos como yo que también querían cambiar los estilos del elemento y / o cambiar la fuente img, solo hacen algo como esto:

<img
  src={''original src url goes here''}
  alt="example"
  onError={(e) => {
     e.target.src = ''/example/noimage.png'' // some replacement image
     e.target.style = ''padding: 8px; margin: 16px'' // inline styles in html format
  }}
/>

¡Espero eso ayude!

Answer 6

Puede utilizar componente no controlado:

<img src={this.state.img} ref={img => this.img = img} onError={
    () => this.img.src = ''img/default.img''
}>

Answer 7

Solo necesita definir el controlador de error en lugar de cambiar el estado que activará el método de procesamiento del componente y, finalmente, el componente se volverá a generar con el marcador de posición.

Por favor, ¡no uses jQuery y Reacciona juntos!

import React from ''react'';
import {Link} from ''react-router'';
import ContactStore from ''../stores/ContactStore''
import ContactActions from ''../actions/ContactActions'';

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = ContactStore.getState();
    this.onChange = this.onChange.bind(this); 
 }

componentDidMount() {
  ContactStore.listen(this.onChange);
  ContactActions.getContact(this.props.params.id);
}

componentWillUnmount() {
  ContactStore.unlisten(this.onChange);
}

componentDidUpdate(prevProps) {
  if (prevProps.params.id !== this.props.params.id) {
    ContactActions.getContact(this.props.params.id);
  }
}

onChange(state) {
  this.setState(state);
}

onError() {
  this.setState({
    imageUrl: "img/default.png"
  })
}

render() {
  return (
    <div className=''container''>
      <div className=''list-group''>
        <div className=''list-group-item animated fadeIn''>
          <h4>{this.state.contact.displayname}</h4>
          <img onError={this.onError.bind(this)} src={this.state.imageUrl} />
        </div>
      </div>
    </div>
  );
}

export default Contact;

Answer 8

Tomé la respuesta de @ Skay y creé un componente de Imagen reutilizable. Publicación en caso de que ayude a alguien:

import React, { PropTypes } from ''react'';

const Image = ({src, fallbackSrc, ...other}) => {
    let element;
    const changeSrc = newSrc => {
        element.src = newSrc;
    };
    return (
        <img src={src} 
             onError={() => changeSrc(fallbackSrc)} 
             ref={el => element=el} 
             {...other} />
    );
};

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

Answer 9

esto funciona para mi

{<img className="images"
    src={`/images/${student.src ? student.src : "noimage.png" }`} alt=  
{student.firstname} />} 

estudiante es el nombre de mi matriz y muestra la imagen cuando no hay imagen.

Answer 10

La respuesta de Arthur resultará en devoluciones de llamada infinitas si la imagen de respaldo también falla.

Para evitar eso, primero establezca un estado en el constructor para imageLoadError como verdadero:

constructor(props) {
    super(props);
    this.state = {
      imageLoadError: true,
    };
}

y luego verifique este valor de estado en la función onError para evitar infinitas devoluciones de llamada,

El código se verá así:

<img
    src={"https://if_this_url_fails_go_to_onError"}
    onError={e => { 
        if(this.state.imageLoadError) { 
        this.setState({
            imageLoadError: false
        });
        e.target.src = ''fallbackImage.png'';
    }}
    }
/>

Answer 11

import OriginalImage from ''../../originalImg.png''
import ReplacementImage from ''../../replaceImg.png''

<img
 src= OriginalImage
 alt="example"
 onError={(e) => {
    e.target.src = ReplacementImage //replacement image imported above
    e.target.style = ''padding: 8px; margin: 16px'' // inline styles in html format
 }}
/>

esto es lo que estoy usando actualmente