私は、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>
壊れた画像もチェックするにはどうすればいいですか? 必要な関連データはこれですべてだと思いますが、他に表示すべきものがあればお知らせください。ありがとうございます!
ベストアンサー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'
}