如何强制锚点标签链接的图片在新标签页打开而非下载？

首先得搞清楚为啥会这样：服务器返回的响应头里Content-Disposition被设置成了attachment，这个指令会直接告诉浏览器“把这个资源当附件下载”，哪怕你加了target="_blank"也没用——服务器的指令优先级比前端属性高得多。

接下来分两种情况给你解决方案：

情况1：你能控制服务器配置 #

如果这个图片是你自己服务器上的资源，直接改服务器的响应头就行：把Content-Disposition改成inline，这样浏览器就会尝试在页面里渲染图片，而不是触发下载。

举几个常见的实现例子：

• 后端代码（以PHP为例）：

  header('Content-Disposition: inline');
  

• Apache服务器（通过.htaccess文件）：

  <FilesMatch "\.(jpg|jpeg|png|gif)$">
      Header set Content-Disposition inline
  </FilesMatch>
  

• Nginx服务器（配置文件中）：

  location ~* \.(jpg|jpeg|png|gif)$ {
      add_header Content-Disposition inline;
  }
  

情况2：你没法控制服务器（比如用的是第三方资源，像你提到的Facebook头像链接） #

这种情况下，前端可以通过“转存”图片的方式绕过服务器的下载指令：先把图片加载成Blob对象，再生成一个临时的Blob URL，最后在新标签页打开这个临时URL。

具体的代码实现大概是这样：

// 找到目标链接
const imgLink = document.querySelector('a[href*="lookaside.facebook.com"]');

// 添加点击事件拦截
imgLink.addEventListener('click', async (e) => {
  // 阻止默认的跳转行为
  e.preventDefault();
  const originalUrl = e.target.href;

  try {
    // 用fetch获取图片资源
    const response = await fetch(originalUrl);
    // 转换成Blob对象
    const imgBlob = await response.blob();
    // 生成临时的Blob URL
    const blobUrl = URL.createObjectURL(imgBlob);
    // 在新标签页打开
    window.open(blobUrl, '_blank');

    // 可选：5秒后释放临时URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(blobUrl), 5000);
  } catch (error) {
    console.error('加载图片失败:', error);
    // 如果fetch失败（比如遇到CORS跨域问题），就 fallback 到原链接跳转
    window.open(originalUrl, '_blank');
  }
});

不过这里要注意：如果第三方服务器没有设置允许跨域的响应头，fetch会失败。这时候要么找个代理服务器中转请求，要么看看有没有其他允许跨域的API可以获取这个图片资源。

最后补充一句：你提到的download属性是强制浏览器下载，和你要的效果正好相反，而且它也没法覆盖服务器的Content-Disposition: attachment指令，所以这条路走不通。

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