vue，通过v-for控制数组渲染图标栏，图片无法正确显示

Question

如题，本人新手自学vue中，跟着某课程在模仿做一个app的项目，

如上图所示，

在处理轮播下方的icon栏的时候，写的组件如下，但是图片始终无法正确显示：

<template>

<div class='icons'>
    <div class="icons-item" v-for="item in iconsList" :key="item.id">
        <img src="item.link">
        <p>{{ item.title }}</p>
    </div>
</div>

</template>

<script>
export default {

name:'HomeIcon',

data(){
    return{
        iconsList:[
            {
              id:'01',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
              title:'景点门票'
            },
            {
              id:'02',
              imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/4d/a1eda1a2b8414302.png',
              title:'暑期夜场'
            }
        ]
    }
}

}
</script>
<style scoped>

.icons-item{

width:25%;
padding-bottom: 5%;
height:0%;

}

.icons-item img{

width: 1.1rem;
height: 1.1rem;
display: block;
margin:0 auto;
padding-top: .1rem;

}

.icons-item p{

margin-top: .1rem;
font-size: .28rem;
text-align: center;
color: #212121;

}

</style>

出来的效果如下图

换了图片链接，改本地链接，都不行，不确定问题出在什么地方，求高手指点。

Answer 1

<img :src="item.link">

Answer 2

<img :src="item.link">

当你要把属性值设置成变量时，需要用v-bind去绑定
如<img v-bind:src="item.link">可以简写成<img :src="item.link">
如<p :style=' item.flag ? "color:red;" : "color:blue;" '>我改变了颜色</p>
可以看下官方文档
官方文档

Answer 3

img 的src属性要进行绑定（v-bind:src=""item.link或简写:src=""item.link），如果不绑定，它会把里面当字符串处理

Answer 4

<div class='icons'>
    <div class="icons-item" v-for="item in iconsList" :key="item.id">
        <img :src="item.link">
        <p>{{ item.title }}</p>
    </div>
</div>

这样写 v-bind:src="item.link" 缩写成:scr="item.link"你漏写冒号了

Answer 5

src="src"绑定的是src字符创
:src="src"绑定的是src变量

Answer 6

看下vue文档，对你帮助更大

<img :src="item.link">

Answer 7

src绑定变量时前面要加: