<div class="bgi" style="background-image: url(https://i.imgur.com/eTxzk46.jpeg)"></div>
<div class="bgi" style="background-image: url(https://i.imgur.com/eTxzk46.jpeg)"></div>
<div class="bgi" style="background-image: url(https://i.imgur.com/eTxzk46.jpeg)"></div>
<div class="bgi" style="background-image: url(https://i.imgur.com/eTxzk46.jpeg)"></div>
<div class="bgi" style="background-image: url(https://i.imgur.com/Txzk46.jpeg)"></div>
.bgi {
width: 200px;
height: 200px;
background-size: cover;
}
const Bgi = document.querySelectorAll('.bgi');
const defaultImg = 'https://i.imgur.com/4aYifFs.jpeg';
Bgi.forEach((item) => {
const bgiItem = item.style.backgroundImage.split('(')[1].split(')')[0];
const image = new Image();
image.src = bgiItem.replace(/\"/g, '');
if (!image.complete) {
item.style.backgroundImage = `url(${defaultImg})`;
}
image.onload = () => {
console.log('圖片正確')
};
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.