tips
onerror
img
React

Reactで画像がリンク切れの時に代替画像を表示したい時のサンプル

imgタグonErrorに以下を記述すればOK

onError={(e) => e.target.src = 'image path'}

以下、実装するときのイメージサンプル。


Sample.js

import React, {Component} from 'react';

import noimage from './noimage.png';

class Sample extends Component {
render() {
<img className={'sample'}
alt={'test'}
src={'image path'}
onError={(e) => e.target.src = noimage} />
}
}

export default Sample


noimage.pngは適当なものを用意して、設置で動くはず


参考ページ

react.js Replace img src onerror