图片防盗链显示问题,通过 ReferrerPolicy 解决

介绍了图片加载不了的原因:跨域问题、防盗链机制、URL 编码问题、图片路径或参数错误、浏览器或网络问题、HTML 或 CSS 干扰;也介绍了微信小程序中对勾符号被解析成根号的问题。

图片防盗链显示问题,通过 ReferrerPolicy 解决

问题描述

问题描述:最近用百度的植物识别接口时,返回的图片地址单独在浏览器上访问可以正常预览,但是通过 img 标签加载就显示不了

图片地址为:https://bkimg.cdn.bcebos.com/pic/b3b7d0a20cf431adcbeff9b2817ebbaf2edda2cc32ad?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70

报错信息如下所示:

Failed to load response data : No data found for resource with given identifier

net::ERR_BLOCKED_BY_CLIENT

问题分析

问题分析:可能的原因有如下几种

  1. 跨域问题: 浏览器对于从不同源加载资源(如图片)有严格的同源策略限制。当图片被嵌入到另一个域名下的网页时,可能会触发跨域限制,查响应头中是否有相关的 CORS(跨源资源共享)限制。
  2. 防盗链机制: 一些图片服务器会采用防盗链措施,仅允许特定来源或经过授权的请求访问图片资源。这种情况下,即使图片链接可以直接在浏览器中打开,但当图片被嵌入到网页的<img>标签中时,服务器可能会检测到请求来源不符合其防盗链规则,从而拒绝服务。
  3. URL 编码问题: 确保在实际使用时<img>标签内的 src 属性值正确编码,特别是如果链接中包含特殊字符或非 ASCII 字符,需要确保它们被正确转码。
  4. 图片路径或参数错误: 链接中可能包含了动态参数(如时间戳、访问密钥等)用于防止缓存或进行访问控制。这些参数可能随着时间或访问次数而变化,导致复制到<img>标签的链接在一段时间后失效。
  5. 浏览器或网络问题: 清除浏览器缓存,尝试在不同的浏览器或设备上测试,以及检查网络连接状况,以排除浏览器特定行为或临时网络故障导致的加载问题。
  6. HTML 或 CSS 干扰: 检查<img>标签及其父元素的 CSS 样式,确认没有设置可能导致图片不可见的属性,如 display: none、visibility: hidden、width: 0、height: 0 等。同时,确认<img>标签本身没有语法错误,如缺失关闭斜杠/>或属性值未用引号包围等。

最后得出的结论是百度图库的防盗链机制导致的

问题解决

问题解决:添加 ReferrerPolicy 属性

js 复制代码
<img src="" referrerPolicy="no-referrer" />

uniapp小程序符号对勾解析

富文本编辑文本为:<p><span style="font-family: &quot;times new roman&quot;; font-size: 18px;">Ⅰ. Listen and judge. (听句子, 判断正"√"误"×"。)</span></p>

小程序解析效果如下:对勾被解析成了根号

钉钉中显示效果如下所示:对勾显示出来,也是根号,只是上面短一些

原因分析:

计算机中,符号对勾通常表示为 √,也可以称为根号或者平方根号

解决办法: (1)可以用 html 的符号显示:&check; 或者 &#10003;

(2)换对勾符号:✓ 这是勾 √ 这是根号

✓ 这是勾 ✗ 这是叉

最终解决效果:

(1)富文本内容:<p><span style="font-family: &quot;times new roman&quot;; font-size: 18px;">Ⅰ. Listen and judge. (听句子, 判断正"✓"误"✗"。)</span></p>

(2)小程序显示效果:

相关推荐
我不吃饼干5 分钟前
手写 Vue 模板编译(生成篇)
前端·vue.js
s小布丁7 分钟前
vue2纯前端使用Docxtemplater生成word报告,包含echart图表,表格
前端
web小白成长日记8 小时前
企业级 Vue3 + Element Plus 主题定制架构:从“能用”到“好用”的进阶之路
前端·架构
APIshop9 小时前
Python 爬虫获取 item_get_web —— 淘宝商品 SKU、详情图、券后价全流程解析
前端·爬虫·python
风送雨9 小时前
FastMCP 2.0 服务端开发教学文档(下)
服务器·前端·网络·人工智能·python·ai
XTTX1109 小时前
Vue3+Cesium教程(36)--动态设置降雨效果
前端·javascript·vue.js
LYFlied10 小时前
WebGPU与浏览器边缘智能:开启去中心化AI新纪元
前端·人工智能·大模型·去中心化·区块链
Setsuna_F_Seiei10 小时前
2025 年度总结:人生重要阶段的一年
前端·程序员·年终总结
model200510 小时前
alibaba linux3 系统盘网站迁移数据盘
java·服务器·前端
han_11 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试