为何通过XHR加载图片内容在Microsoft Edge中无法实现？

嘿，我帮你捋捋这个问题——你说用XHR获取图片的功能在Edge之外都正常，唯独Edge出问题，结合你贴的代码片段里用了WebP格式的Data URI，大概率是Edge的WebP兼容性或者XHR二进制数据处理的问题，下面给你具体的分析和解决办法：

为什么只有Edge出问题？ #

• 如果你用的是旧版Edge（基于EdgeHTML内核，不是现在的Chromium版），那它本身就不支持WebP格式，不管是通过普通URL还是Data URI加载都会失败；
• 就算是新版Chromium Edge，要是你的XHR没正确处理二进制数据，也可能导致WebP图片解析出错。

具体解决方案 #

1. 给旧版Edge做格式降级 #

如果需要兼容旧版Edge，最好同时准备JPG/PNG格式的备用图，先检测浏览器是否支持WebP，再选择对应的图片：

// 检测浏览器是否支持WebP
function supportsWebP() {
  return new Promise((resolve) => {
    const testImg = new Image();
    testImg.onload = () => resolve(testImg.width === 1);
    testImg.onerror = () => resolve(false);
    // 用一个极小的WebP测试图
    testImg.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
  });
}

// 加载图片的逻辑
async function loadTargetImage() {
  const canUseWebP = await supportsWebP();
  // 替换成你实际的图片地址
  const imgUrl = canUseWebP ? 'your-image.webp' : 'your-image.jpg';

  const xhr = new XMLHttpRequest();
  xhr.open('GET', imgUrl, true);
  xhr.responseType = 'blob'; // 重点：设置响应类型为blob，处理二进制更靠谱

  xhr.onload = function() {
    if (this.status === 200) {
      const imgTag = new Image();
      // 用createObjectURL生成临时链接，比转base64高效
      imgTag.src = URL.createObjectURL(this.response);
      imgTag.onload = () => URL.revokeObjectURL(imgTag.src); // 加载完释放资源
      // 把图片加到页面里
      document.body.appendChild(imgTag);
    }
  };

  xhr.send();
}

2. 优化XHR的二进制处理（针对新版Edge） #

如果你的问题是XHR处理数据的方式不对，一定要记得设置responseType为blob或者arraybuffer，别直接用默认的文本类型处理图片二进制，容易乱码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-target-image.webp', true);
xhr.responseType = 'blob'; // 这步很关键！

xhr.onload = function() {
  if (xhr.status === 200) {
    const imgTag = new Image();
    imgTag.src = URL.createObjectURL(xhr.response);
    imgTag.onload = function() {
      URL.revokeObjectURL(this.src); // 避免内存泄漏
    };
    document.body.appendChild(imgTag);
  }
};

xhr.send();

3. 检查你的Data URI是否完整 #

你贴的代码里Data URI末尾是...，如果是直接用这个截断的Data URI加载图片，那不管什么浏览器都加载不出来，只是Edge的表现更明显而已，一定要确保base64编码是完整的。

额外小提示 #

要是新版Chromium Edge还是不行，先检查下浏览器的隐私设置有没有禁用图片加载，或者清个缓存再试试～

内容的提问来源于stack exchange，提问作者Suman Bogati