背景

系统监控发现页面有异常请求:

https://test.test.com/test/test/zh/undefined (404 Not Found)

控制台报了一个 404 的错误,但是页面展示正常,逻辑未受到影响。

出现问题的页面代码:

<template>
    <div class="wrap" :style="{ backgroundImage:`url(${data.imgUrl}` }">
        <!-- 页面内容-->
    </div>
</template>

其中 data.imgUrl为接口返回数据。

原因&解决

实际上出现这个问题主要是由于 vue 的渲染机制,解决方法也很简单:

  1. 给url的变量设置一个默认值
  2. 判断接口请求完再进行页面渲染

例如:

<div class="wrap" :style="{ backgroundImage: data.imgUrl && `url(${data.imgUrl}` }">

或者

<div class="wrap" v-if="pageReady" :style="{ backgroundImage: `url(${data.imgUrl}` }">

...

data() {
    return {
        pageReady: true
    }
}

Mmmy
145 声望14 粉丝

每天都要学习鸭!🦆