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

Question

问题：我怎么知道一个图像变量已经成功地从一个图像url加载了一个图像？

我一直在使用的相关 javascript 代码如下（我正在编写 Chrome 扩展）。我想从图像数组中抓取随机图像，因此我可以在网页上使用（注入）随机图像。但是因为我是从一些有大量免费图片的网站上抓取图片的，所以我想确保随机图片没有被免费图片网站出于任何原因阻止（如果被阻止，那么我会尝试另一个随机图片来自另一个站点）。我需要知道 img.src 是否包含实际图像。我是 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

您可以使用下面的代码

 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 2

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

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 3

尝试使用 es6 模板文字，而不是使用带有属性的 img 标签代替模板文字：

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

Answer 4

要验证您的变量，请使用 complete attribute。

    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);
    })

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

How can I validate that a variable contains an image?

javascript

arrays

validation