When our website takes a long time, it is inevitable that the pictures will be lost or deleted by mistake, so that the pictures of the article will not be displayed, and the page will become ugly. So how to display the default picture we set when the website picture is lost or failed to obtain, or display multiple pictures randomly by default.
Method 1: When the picture call fails, the default picture set behind the picture will be used on top
<img src="pic/logo2009Blu.gif" onerror="this.src='/pic/default.gif'"> Method 2: Use the js method to display the default image set in the code when the image in the article is wrong
<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>Method 3: Multiple default pictures are displayed randomly when the station picture is lost or failed to obtain
<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>