如何知道浏览器限制显示第 3 方图像？

Question

对于 Web 开发人员，有什么方法可以知道访问用户的浏览器（我正在看你，Firefox 和 Edge）没有显示来自其他网站的图像？

最好是 $_SERVER 可在 PHP 脚本或 Javascript 属性.

中访问的变量

在我的例子中，我有一个 HTML5 游戏，玩家头像有时来自其他网站（仅限 HTTPS URL！）。

如果我知道 第三方内容 加载受访问者限制，我至少会显示通用播放器图片而不是 "broken image" 显示的图标火狐浏览器：

print_r($_SERVER);
print_r($_ENV);

没有显示任何合适的内容，Javascript...

Answer 1

同意 Álvaro González 的观点，尝试使用 onError event。如果在加载外部文件时发生错误，则会触发 onerror 事件。

请参考以下代码：

<img src="Images/imagenotexist.jpg" onError="this.onerror=null;this.src='Images/Image1.jpg';" /> 
<img src="https://www.w3schools.com/html/pic_trulli2.jpg" onError="this.onerror=null;this.src='Images/Image1.jpg';" />

以上代码在IE11、Microsoft Edge和Chrome浏览器中运行良好，如果之前设置的图片不存在，则显示默认图片(Image/Image1.jpg)。

结果如下：

设置onError事件之前：

使用 onError 事件后：

Answer 2

我还没有彻底测试过，但是 HTMLImageElement 界面 provides an error handler:

If an error occurs while trying to load or render the image, and an onerror event handler has been configured to handle the error event, that event handler will get called.

这是一个快速而粗略的概念证明：

var images = document.getElementsByTagName("img");
var i;
for (i = 0; i < images.length; i++) {
  images[i].addEventListener("error", brokenImageHandler);
}

function brokenImageHandler(event) {
  var img = event.target;
  var replacement = "https://via.placeholder.com/" + img.getAttribute("width") + "x" + img.getAttribute("height");
  img.setAttribute("src", replacement);
}

<img src="" width="300" height="100" alt="Blank URI">
<img src="https://example.com/broken.png" width="200" height="50" alt="Broken link">

如何知道浏览器限制显示第 3 方图像？

How to know, that a browser is restricting display of 3rd party images?

javascript

php

firefox

image

microsoft-edge