【vue 之坑】:style设置背景图片（backgroundImage）会发起一个 undefined 的请求

背景

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

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
    }
}