哎?这列表里的图片怎么有些不见了

最近都是一些很简单的增删改查的小需求,没什么好特别记录的。不过今天测试同学发现了我负责开发的一个组件有一个很奇怪的bug:部分顶部 logo 图片不展示。

第一反应是"甩锅"(bushi),"后端接口肯定有些偷懒没造数据!"

于是我 F12 打开 network 看了下接口,后端是正常返回了图片的 oss 地址的。(坏了,这下是我的锅了)

但是为什么有些会展示,有些不会展示呢? 我又看了下接口里每个返回的 url :

json 复制代码
logoUrl: "upload/2024/2/2/xxxxxxxx/xx.jpg"  // 正常展示
logoUrl: "upload/2024/3/1/xxxxxxx/xx(1).jpg"  //不展示

观察 element 结构和代码,发现我在这里是复制其他文件已经拼接好的 oss 图片结构,其使用的不是 img 标签,而是通过 div 标签设置background-image属性为拼接的 url 来展示图片

奇怪的是列表里有一部分没有了background-image这个属性

既然有些图片可以展示,有些不可以,那么我拼接的方式应该是没问题的,应该是有些 url 格式比较"特殊",导致background-image看不懂这个 url。于是我仔细检查没有展示出的图片的 url,发现他们都有一个相同的特征:含有( )括号!

百度了一下,我才知道background-image属性当 url 有括号时是有问题的,背景图不会展示出来。

而它的解决方法是在 url 外再包一层''。即:

json 复制代码
background-image: url(logoUrl)    // 👎
background-image: url('logoUrl')  // 👍

于是,我将代码修改为:

图片便可以正常展示了。

其实,平时写死地址时都会加上''的,但是之前的开发是在内联样式中拼接的地址,导致没注意加上这个引号。而background-image又是可以处理这种不带括号的 url 的,之前的图片也没有带括号的地址,导致这个问题一直没有被发现。结果我这个偷懒倒霉蛋复制过来用给碰上了🤣。

相关推荐
懒大王95272 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
陈皮话梅糖@4 小时前
使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例
开发语言·javascript·flutter
Yolo@~8 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克8 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道8 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
dr李四维8 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久8 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain8 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏9 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing9 小时前
React-Markdown详解
前端·react.js·前端框架