图片防盗链显示问题,通过 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)小程序显示效果:

相关推荐
To_OC3 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC3 小时前
LC 17 电话号码的字母组合:我的回溯算法,就是从这道题开窍的
javascript·算法·leetcode
vipbic3 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy3 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志4 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble5 小时前
c端系统,其实更像一个信息展示平台
前端
你怎么知道我是队长5 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
李姆斯5 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜6 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司6 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能