网页中media image无法通过img标签显示 点击对应链接可正常查看媒体文件
图片资源a标签可访问、img标签无法加载排查方案
1. 确认资源本身类型
点击yo链接打开资源后,按F12打开浏览器开发者工具,切换到「网络」面板刷新页面,查看该资源请求的响应头Content-Type字段:
- 若字段值不属于图片类型(比如是
video/mp4、application/octet-stream、text/plain等),img标签本身不支持渲染非图片类资源,自然无法展示 - 若字段值为合法图片格式(
image/jpeg、image/png、image/webp等),继续往下排查
2. 排查防盗链拦截规则
绝大多数静态资源服务的防盗链规则对导航请求和资源加载请求做了区分:a标签点击跳转属于导航类请求,img标签加载属于静态资源请求,二者的请求头Referer校验规则不一致。
回到原页面,打开开发者工具「网络」面板刷新页面,找到img标签对应的资源请求:
- 若请求返回403状态码,即可确认是防盗链拦截了img的加载请求,需要调整资源服务的防盗链规则,允许当前站点的图片加载请求
3. 校验模板渲染路径一致性
你给出的代码里a标签的模板变量是{{status.adv.url }}(末尾带空格),img标签的是{{status.adv.url}}(无空格),虽然大部分模板引擎会自动修剪变量前后空格,仍建议右键点击原页面选择「查看网页源代码」,确认两个标签渲染后的实际路径是否完全一致,避免特殊字符转义、空格残留导致img路径错误。
快速验证:复制渲染后的img的src路径,新开浏览器标签页粘贴访问,若能正常打开即可排除路径问题
4. 检查CSP内容安全策略限制
查看原页面的响应头Content-Security-Policy字段,是否配置了img-src规则限制图片资源的加载域名:CSP的img-src规则只会拦截img标签的资源加载,不会限制a标签的跳转,若规则未包含你的资源域名,需要把对应域名添加到img-src白名单中。
内容的提问来源于stack exchange,提问作者JAYESH rathi
相关产品推荐
相关产品推荐

