如何验证变量是否包含图像

Question

问题：如何知道图像变量已成功从图像url加载图像？

我一直在使用的相关javascript代码如下(我正在编写Chrome扩展(。我想从一组图像中获取一个随机图像，这样我就可以在网页上使用(注入(随机图像。但由于我正在从一些有大量免费图片的网站上抓取图片，我想确保免费图片网站不会因为任何原因屏蔽随机图片(如果屏蔽了，我会尝试另一个网站上的另一个随机图片(。我需要知道img.src是否包含实际的图像。我是javascript的新手，昨天刚读了一本关于javascript的书——我需要分号还是应该放弃使用分号？(我来自C/C++的后台编码(

const myImages = [];  

myImages[0] = 'https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg';
myImages[1] = 'https://images.freeimages.com/images/large-previews/01a/snail-1397758.jpg';
myImages[2] = 'https://cdn.pixabay.com/photo/2017/09/17/20/35/sloth-2759724_960_720.jpg';

const img = document.createElement('img');
img.src = myImages[Math.floor(Math.random()*myImages.length)];
img.style.width = '100%';
img.style.height = 'auto';

document.querySelector('#pageContent').replaceWith(img);

Answer 1

如果在图像加载错误时未加载图像，则应该编写逻辑。

const myImages = [];  

myImages[0] = 'https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg';
myImages[1] = 'https://images.freeimages.com/images/large-previews/01a/snail-1397758.jpg';
myImages[2] = 'https://cdn.pixabay.com/photo/2017/09/17/20/35/sloth-2759724_960_720.jpg';

const img = document.createElement('img');
img.src = myImages[Math.floor(Math.random()*myImages.length)];
img.style.width = '100%';
img.style.height = 'auto';
document.querySelector('#pageContent').replaceWith(img);
img.onerror = function() {
// If image not loaded, write your logic here
};

<div id="pageContent">imaged</div>

Answer 2

您可以使用下面的代码

function checkExist() {
var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {
console.log("exist")
}
};
xhttp.open("GET",
"https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg",true);    
xhttp.send();
}

Answer 3

要验证变量，请使用complete属性。

const myImages = [];
myImages[0] = 'https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg';
myImages[1] = 'https://images.freeimages.com/images/large-previews/01a/snail-1397758.jpg';
myImages[2] = 'https://cdn.pixabay.com/photo/2017/09/17/20/35/sloth-2759724_960_720.jpg';
const img = document.createElement('img');
img.src = myImages[Math.floor(Math.random()*myImages.length)];
img.style.width = '100%';
img.style.height = 'auto';
img.onerror = function() {
// If image not loaded, write your logic here
};
// complete attribute would be false because the image is not yet loaded.
console.log(img.complete);
img.addEventListener("load", () => {
// complete attribute would be true
console.log(img.complete);
document.querySelector('#pageContent').replaceWith(img);
})

Answer 4

尝试使用es6模板文字，而不是模板文字，使用img标记和属性：

var img = `<img src=${myImages.Math.floor(Math.random()*myImages.length)} width='100%' height='auto'`

document.querySelector('#pageContent').appendChield(img);