• 因为此处的 --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
  • 修改后代码
// 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