博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》CSP配错图片加载不了手把手修好目录浏览器控制台疯狂报红Refused to load image from https://cdn.example.com/logo.png because it violates img-src directive.图片全变问号用户急得连发三封邮件。我盯着屏幕心想这破CSP又坑人了。根源就仨字配漏了CSP里img-src规则没覆盖到图片源。常见操作Content-Security-Policy: img-src self;只写了self但图片在CDN比如cdn.example.com。CSP默认拒绝所有非同源资源——你连自己站点的图片都加载不了更别说第三方CDN了。对比代码救急错误配置坑我两小时# 错只允许同源图片Content-Security-Policy:img-src self;# 本地图片能加载但CDN图片直接被拦正确配置直接生效# 对加了CDN域名Content-Security-Policy:img-src self https://cdn.example.com;# 显式允许CDN域名图片秒加载避坑血泪总结别以为self万能第三方CDN必须写全域名比如https://img.cdn.com。测试要带report-uriContent-Security-Policy: ... report-uri /csp-report;浏览器会发请求告诉你哪些源被拦了别手动猜本地开发别写死img-src none会连自己图片都加载不了真·自闭。协议必须写httpsimg-src https://cdn.com比img-src cdn.com更安全避免重定向漏洞。上周我配CSP时把https://漏了写成img-src cdn.com结果图片加载一半卡住。改完一刷新图片蹦出来我直接笑出声——这感觉比喝到冰可乐还爽。记住CSP不是玄学就是个清单。图片加载不了先看控制台报错的域名再看img-src里有没有它。别等用户投诉了才改半夜改配置真·折磨人。