Question

在我的网页中，我有一个图像标记，其源代码通过https连接从api获取图像，有时此请求会失效并重定向到http连接上的错误图像，从而向用户发出警告，其中包含一些网页部分是一个不安全的连接。有没有办法阻止浏览器使用不安全的链接或更改它以通过https以某种方式下载https。

<img src="https://example.com/image_320x240.png"/>

api并不总是准备好图像，因此它会重定向到

<img src="http://example.com/error_320x240.png"/>

错误图像也可以在https上使用，但我不知道浏览器如何使用js或在下载图像之前检查网址。

Answer 1

如果上面的图片还没有准备就可以提供你自己的错误图片吗？

也许是这样的：

function populateImage(url, element) {
  var req = new XMLHttpRequest();
  req.open('GET', url);
  req.onreadystatechange = function() {
    if (req.readyState === 4) {
      var img = document.createElement('img')
      if (req.status === 200) {
        img.src = url;
      } else {
        img.src = 'https://path.to.my.errorImage';
      }
      element.appendChild(img);
    }
  };
  req.send();
}



<p id='placeholder'></p>
populateImage('https://exmple.com/320x240.png',document.getElementById('placeholder'));

Answer 2

您可以尝试通过JavaScript加载图片来解决问题：

var img = new Image();
img.onerror = function(e) {
  // Do something on error. Load other image?
}
img.onload = function() {
  if (this.src.match(/https:/)) {
    document.getElementById('foo').src = this.src;
  } else {
    this.src = this.src.replace('http:', 'https:');
  }
};
img.src = 'https://example.com/image_320x240.png';

html中的图片元素如下所示：

<img src="" alt="" id="foo" />

代码的作用是通过javascript加载图像。如果加载了图像，则检查加载图像的URL。如果url是安全的，则通过将其分配给DOM中的元素来显示图像。如果没有，则将不安全的URL更改为安全的URL并加载新URL中的图像。

我希望这会对你有所帮助。

使用http图片标记src

2 个答案: