vue中想用数据绑定的形式渲染背景图片总是报错：未定义。

Question

vue中想用数据绑定的形式渲染背景图片总是报错

相关代码

<template>

<div class="shop-header" >
    <span class="mui-icon mui-icon-arrowleft mui-active" :style="{ backgroundImage:`url(${info[1].image_url})`}"  @click="$router.back()">
    </span>
</div>

</template>

info[1]是有数据的：

而且也能显示在style中：

但是还会报错：
vue.js:633 [Vue warn]: Error in render: "TypeError: Cannot read property 'image_url' of undefined"

found in

---> <ShopHeader> at src/components/shopHeader/shopHeader.vue

   <Shop> at src/pages/shop/shop.vue
     <App> at src/App.vue
       <Root>

求大神指导啊。

Answer 1

加个v-if：

<div class="shop-header" >
    <span v-if="info[1]" class="mui-icon mui-icon-arrowleft mui-active" :style="{ backgroundImage:`url(${info[1].image_url})`}"  @click="$router.back()">
    </span>
</div>

Answer 2

是不是里面url是双引号，然后外面也是双引号，导致的undefined，将style改为单引号试试？

Answer 3

计算属性返回style，刚加载如果info是空数组当然会报错，不过应该是能正常显示

Answer 4

这个报错是因为在初始状态下 info[1] 没有 image_url 这个键引起的。