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

来源:网络 文章列表 2019-08-22 8
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引入。

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接