htmlレベルやCSSのレベルで可能なシンプルな方法のメモ
Object要素を使う例
正常な場合
data属性のURLが404
HTML
<object class="object-image" data="https://tenman.info/labo/css/files/raspberries.jpg" type="image/png"> <img src="https://tenman.info/labo/css/files/tanpopo.jpg" /> </object>
CSS
.object-image img, .object-image{ width:290px; height:auto; }
マルチプルバックグラウンド画像を使う例
backgroundの最初のURLが404
HTML
<div class="bg-image"></div>
CSS
.bg-image{ width:290px; height:290px; background-image: url(https://tenman.info/labo/css/files/raspberries.jpg), url(https://tenman.info/labo/css/files/tanpopo.jpg); background-size:contain; }
Inputting a default image in case the src arribute of an html is not valid?