为什么有的网站图片加载不出来

打开一个网页，为什网站文字都正常显示，图片唯独图片位置一片空白，加载或者只出现一个破碎的不出图标。刷新几次也没用。为什网站这种情况你肯定遇到过。图片问题不一定出在你的加载网络上，也不一定是不出网站挂了。图片加载失败的为什网站原因五花八门，下面挑几个最常见的图片说。

图片地址写错了，加载或者文件根本不在那

这是不出最蠢但也最常见的原因。网页代码里写了一个图片路径，为什网站比如 <img src="/images/photo.jpg">，图片但服务器上那个位置压根没有这个文件。加载可能是开发人员改过目录结构忘了更新，也可能是图片上传时文件名大小写搞错了——Linux服务器对文件名大小写敏感，Photo.jpg 和 photo.jpg 是两个不同的文件。浏览器拿到一个404响应，自然什么都不显示。

我碰到过一次，某个电商网站的商品详情页，主图死活加载不出来，但缩略图正常。后来查了一下，缩略图走的是CDN，主图走的是源站，源站那张图被运维误删了。CDN有缓存所以没事，源站直接404。

跨域限制和防盗链

很多图片服务器会检查请求头里的 Referer 字段。如果请求不是从自己网站的页面发出来的，就直接拒绝。这叫防盗链。比如你在自己博客里直接引用某图床的图片，图床发现 Referer 是你博客的域名而不是它自己的，就返回一个403或者一张“禁止盗链”的提示图。

跨域问题（CORS）也会导致图片加载失败，不过这种情况更多出现在 canvas 绘图或者 JavaScript 通过 fetch 获取图片数据的时候。普通的 <img> 标签不受CORS限制，但如果你用 crossorigin 属性又没配好服务器响应头，那就另说了。

HTTPS 页面加载 HTTP 图片

浏览器越来越严格了。如果一个页面是通过 HTTPS 加载的，里面混了一张 HTTP 协议的图片，Chrome 和 Firefox 会直接拦截，控制台报“Mixed Content”错误。图片根本不发请求出去。这个坑很多老网站迁移到 HTTPS 时都会踩。解决办法要么把图片也换成 HTTPS，要么把图片下载到本地服务器上。

图片太大，超时了

有些图片单张好几兆，服务器带宽又小，加载半天加载不完。浏览器有个默认超时时间，超过就放弃。用户看到的就是一直转圈然后空白。移动网络下这个问题尤其明显。我见过一个后台管理系统，用户上传了张8000×6000的未经压缩的照片当头像，前端也没做裁剪，结果每次打开个人资料页都要等十几秒，运气不好就加载失败。

DNS 解析失败或 CDN 节点挂了

图片放在独立的图片域名下，比如 img.example.com。如果这个域名的 DNS 解析出了问题，或者 CDN 的某个边缘节点故障，图片就加载不出来。但网页其他部分用的是主域名，解析正常，所以文字照常显示。这种故障通常影响一片地区而不是所有人。之前某云厂商的 CDN 出过一次事故，大量网站图片挂了，文字正常，就是因为图片走了 CDN 而 HTML 没走。

浏览器插件或广告拦截

AdBlock、uBlock Origin 这类插件会根据 URL 特征或元素尺寸来屏蔽内容。有些图片的路径里带了 ad、banner、sponsor 这样的关键词，就被误杀了。还有的插件会屏蔽所有尺寸接近广告标准（比如 728×90）的图片。你把插件关掉再刷新，图片就出来了。这种问题排查起来最让人抓狂，因为代码本身没毛病。

图片加载不出来，原因可能在前端、后端、网络、服务器配置、甚至用户自己的浏览器上。下次遇到，按 F12 打开开发者工具，看 Network 面板里那张图片的请求状态码——是404、403、超时还是被拦截，基本就能定位方向了。