当ウェブサイトに時間がかかると、誤って写真を紛失したり削除したりすることは避けられず、記事の写真が表示されず、ページが見苦しくなります。したがって、Webサイトの画像が失われたり、取得できなかった場合に設定したデフォルトの画像を表示する方法、またはデフォルトで複数の画像をランダムに表示する方法。
方法1:画像の呼び出しが失敗すると、画像の後ろに設定されているデフォルトの画像が上に使用されます
<img src="pic/logo2009Blu.gif" onerror="this.src='/pic/default.gif'">
方法2:jsメソッドを使用して、記事の画像が間違っている場合にコードに設定されているデフォルトの画像を表示します
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("img").error(function () {
$(this).attr("src", "http:/www.xxx.com/uploads/img/soulution/2.jpg");
});
});
</script>
方法3:ステーション画像が失われたり、取得できなかったりすると、複数のデフォルト画像がランダムに表示されます
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("img").error(function () {
var x = 6;
var y = 1;
var rand = parseInt(Math.random() * (x - y + 1) + y);
var url = 'http://www.xxxx.com/uploads/img/soulution/'+rand+'.jpg'
$(this).attr("src", url);
});
});
</script>