图片链接有效但img标签加载破裂、直接访问自动下载的原因是什么？

为什么直接访问链接时浏览器会自动下载而非预览 #

核心是后端返回的HTTP响应头配置不符合浏览器预览规则，常见两类错误配置：

• 响应头Content-Disposition设置为attachment
  该响应头的作用就是强制浏览器将资源作为附件下载，哪怕内容本身是可预览的图片，浏览器也不会在窗口内渲染，直接触发下载逻辑。需要预览的话该值应设为inline。
• 响应头Content-Type设置错误
  不同格式的图片对应专属的MIME类型，比如JPG对应image/jpeg、PNG对应image/png，如果后端错误将图片的Content-Type设为通用二进制类型application/octet-stream，浏览器会识别为未知二进制资源，默认触发下载而非预览。

为什么URL有效的前提下img标签无法正常加载图片 #

和响应头配置、请求上下文差异都有关，常见原因如下：

• Content-Type不匹配
  浏览器渲染<img>标签时会校验响应的Content-Type是否为合法图片MIME类型，若返回的是application/octet-stream或其他非图片类型，浏览器会判定资源不可渲染，直接显示裂图。
  你示例中用的img标签如下，路径如果没有拼接错误的话优先排查这个配置：

  <img alt="img" src="/path/to/image">
  

• 跨域访问限制
  如果图片资源和当前页面不属于同一个域名，且图片服务器未配置CORS规则允许当前页面域名访问，同时<img>标签添加了crossorigin属性，浏览器会拦截跨域请求，导致图片加载失败。
• 请求权限校验不匹配
  不少后端会对图片请求做额外校验，比如校验Referer请求头、请求携带的认证Cookie：

  地址栏直接访问时，请求的Referer为空，且会自动带上当前域名下的所有有效Cookie；而页面内的<img>发起请求时，Referer为当前页面地址，跨域场景下默认不会携带Cookie。如果后端拦截了Referer不符合规则、或者缺少认证凭证的请求，就会返回错误内容而非图片，导致加载失败。

• 相对路径适配错误
  你代码中使用的是相对路径/path/to/image，要确认该路径是相对于当前页面域名的根路径，如果图片实际存放在其他独立域名下，相对路径会拼接出错误的请求地址，导致资源不存在。

快速排查方案 #

打开浏览器开发者工具的「网络」面板，筛选出对应图片的请求，查看以下信息即可定位问题：

1. 响应头的Content-Disposition、Content-Type是否符合上述要求
2. 响应的HTTP状态码是否为200，有没有出现403、404、CORS拦截类错误
3. 响应体内容是否为合法的图片二进制流，而非后端返回的错误提示页面

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