因为此处的
--background-view
成为了 css 中的变量,所以在一开始 dramaInfo.cover_url 为空,浏览器也会进行一遍图片资源请求,故会使得该请求报错源代码
<div
class="blur-box u-rela u-p-14 u-p-t-40"
:style="{ '--background-view': 'url(' + dramaInfo.cover_url + ')' }"
></div>
<!-- css
.blur-box:before {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
content: '';
background-size: cover;
background-position: center;
background-attachment: fixed;
-webkit-filter: blur(15px) brightness(100%);
filter: blur(10px) brightness(80%);
background-image: var(--background-view);
}
-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- 修改后代码
// html 改为
<div class="blur-box u-rela u-p-b-14" :style="dramaInfo_bg_style"></div>
// JS
// 解决 style 中 '--background-view' 写法的动态变量数据,在未返回值之前,使用undefined来访问CDN资源
const dramaInfo_bg_style = computed(() => {
if (dramaInfo.value.cover_url) {
// 若有图片返回--图片的链接
return { "--background-view": "url(" + dramaInfo.value.cover_url + ")" };
} else {
// 未返回图片前&若有无图片返回--主题色渐变
return {
"background-image": `linear-gradient(var(--van-primary-color-3), transparent)`,
};
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16