react.js img src onerrorを置き換えてください

Question

私はリストからの詳細ビューである反応コンポーネントを持っています。

イメージが存在せず、404エラーがある場合、イメージをデフォルトイメージに置き換えようとしています。

私は通常imerタグでonerrorメソッドを使用しますが、それは動作していないようです。

私はどのように反応するのかわかりません。

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

あなたのコンポーネントは、renderメソッドをトリガーすると、最終的には部品がプレースホルダで再レンダリングする状態を変更するよりも、ただのonErrorハンドラを定義する必要があります。

は、ここに私のコンポーネントです。

jQueryとReactを一緒に使用しないでください！

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 2

私は@ Skayの答えを取り、再利用可能なイメージコンポーネントを作成しました。投稿の場合には、それは誰に役立ちます：

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

Answer 3

を。

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 4

私はそれをやった方法は次のとおりです。あなたが制御されていないコンポーネントを使用することができます

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 5

これは私にとって最高の作品

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