2015-12-04 19 views
6

Ich habe eine Reaktionskomponente, die die Detailansicht aus einer Liste ist.react.js Ersetzen img src onerror

Ich versuche, das Bild durch ein Standardbild zu ersetzen, wenn das Bild nicht existiert und es einen Fehler 404 gibt.

Ich würde normalerweise die Onerror-Methode im Img-Tag verwenden, aber das scheint nicht zu funktionieren.

Ich bin mir nicht sicher, wie dies mit reagieren soll.

Hier ist meine Komponente:

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; 
+0

ich in dieses Problem lief, und ich habe nicht den Code im Moment zu helfen, aber was ich tat, war Ort der Javascript in componentdidmount Überprüfung, Wenn ein Bildfehler auftritt, wird ein Rückruf ausgelöst, der das Bild durch das Standardbild ersetzt. –

Antwort

1

Sie müssen nur onError Handler definieren als den Zustand zu ändern, die Methodenkomponente machen auslösen und schließlich Komponente wird mit Platzhalter neu rendern.

Bitte verwenden Sie nicht jQuery und React zusammen!

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; 
2

Ich habe @ Antwort Skay ist und erstellt eine wiederverwendbare Bildkomponente. Veröffentlichung im Fall hilft es, jedermann:

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;

+0

Sie sollten den Zustand nicht in der '' Komponente speichern, sondern in der Komponente '', was bedeutet, dass Sie ihn als stateful Komponente umgestalten und etwas wie 'this.setState ({src: defaultSrc})' verwenden müssen. –

5

Sie unkontrollierte Komponente verwenden können:

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

Danke, es funktioniert für mich! Warum ist die akzeptierte Antwort nicht? – Aitor

0

Das ist, wie ich es tat.

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}/>; 
      } 
    } 
5

Dies funktioniert am besten für mich

<img src={record.picture} onError={(e)=>{e.target.src="image_path_here"}}/> 
+0

Schön und einfach! –