React JSで壊れた画像を確認する方法

Question

jsonから記事データを取得し、記事テキスト、つまり主人公モジュールの大きな画像を表示するモジュールを作成しています。

私はデータを取得して設定していますので、画像があれば画像が表示され、データに画像がない場合はデフォルト画像が表示されます。 問題は、このメソッドは、既定のイメージを表示するために壊れたリンクを置き換えないことです。

私はまだ反応して状態を使用して新しい...質問は、私は壊れたリンクをチェックするために状態を使用する必要がありますし、どうすればいいですか？

これは私がモジュール内の小道具としてのデータを取得する方法である：

const { newsItemData: { 
      headline = '', 
      bylines = [], 
      publishedDate: publishDate = '', 
      updatedDate: updatedDate = '', 
      link: newsLink = '', 
      contentClassification: category = '', 
      abstract: previewText = '', 
      abstractimage: { filename: newsImage = '' } = {}, 
      surfaceable: { feature: { type: featureType = '' } = {} } = {}, 
     } = {}, 
     wideView, 
     showPill, 
     defaultImage } = this.props; 

私はこの方法で情報を表示：

<div className={imageContainerClassName} style={customBackgroundStyles}> 
     {newsImage ? <img className="img-responsive" src={newsImage} alt={headline}/> : <img className="img-responsive" src={defaultImage} alt={headline}/>} 
</div> 

私もチェックするために何をすべき壊れた画像？ これは必要なすべての関連データだと思います。他に何かを表示する必要があるかどうかを教えてください。 ありがとう！

Answer 1

onerrorというイメージのネイティブイベントがあり、イメージをロードできない場合にアクションを実行できます。

<img onError={this.addDefaultSrc} className="img-responsive" src={newsImage} alt={headline}/> 

//in your component 
addDefaultSrc(ev){ 
    ev.target.src = 'some default image url' 
} 

Answer 2

私の理解によれば、あなたは壊れた画像を見たいと思っています。 onError属性のメソッドを呼び出す必要があります。これをチェックしてください jQuery/JavaScript to replace broken images

Answer 3

前述のように、onErrorは行く方法です。あなたはあなたのためにこれを処理するコンポーネントを探しているなら

、https://github.com/socialtables/react-image-fallback