背景
系统监控发现页面有异常请求:
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 的渲染机制,解决方法也很简单:
- 给url的变量设置一个默认值
- 判断接口请求完再进行页面渲染
例如:
<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
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。