vue中img属性绑定src两种解决方法

在vue中我们图片一般放在assets和static里，引入图片本是很简单的事，但是新手还是会遇到点小坑。

当图片在src文件夹下assets内，纯静态地址的引入

<img src="@/assets/images/bar.png"/>

@为别名变量

这种没啥好说的

我们主要说的是Vue中动态设置img的src值

这里也分为2种情况，

第一种还是纯静态地址比如

data() {
    return {
        imgSrcList: [
            'http://www.jsphp.net/a.jpg',
            'http://www.jsphp.net/a.jpg'
        ]
    };
}
data() {
    return {
        imgSrcList: [
            'http://www.jsphp.net/a.jpg',
            'http://www.jsphp.net/a.jpg'
        ]
    };
}
<li v-for="(item,index) in imgSrcList" :key="index">
    <img :src="item" alt>
</li>

这里很多同学还是会用 <img src="{{item}}" /> 这种写法，这种是错误的。

此处是需要用v-bind属性这种形式的。

第2种，假如我们的图片是在src文件夹下assets内，动态引入的话，你可以这样做

methonds:{ 
  getCharIconSrc(imgname){
     return require('../../assets/images/'+imgname+'.png')
  }
}

注意：此处需要用require引入。