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

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

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

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

Answer 4

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

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