解决方案:
1、判断导致该错误具体代码位置
<HomeBanner
img="http://www.youbaobao.xyz/book/res/bg.jpg"
title="hello world"
subTitle="立即体验"
@onClick="onBannerClick"
/>
{注释有可能出现错误的代码片段,查看该错误提示是否还存在}
2、找到错误代码片段,查看DOM结构
初次加载img 为 undefined
3、可以通过计算属性来消除错误
原代码片段
<div
class="bg-img"
:style="{backgroundImage:'url('+img+')'}"
>
<div class="title">{{title}}</div>
<div class="sub-title">{{subTitle}}</div>
</div>
使用computed计算属性更改后代码片段
<div
class="bg-img"
:style="{backgroundImage:bgImage}"
>
<div class="title">{{title}}</div>
<div class="sub-title">{{subTitle}}</div>
</div>
computed:{
bgImage(){
return 'url('+this.img+')'
}
},
保存代码,成功消除错误。