VUE-使用img标签时,+require动态设置图片地址
<div class="selector"><img src="/images/one.png""/></div>用上面这种方式时,图片会显示出来,但有时间我们需要根据一个标志来设置具显示的哪一张图片,如下://dom 部分<div class="selector"><img :src="flag?...
·
<div class="selector">
<img src="/images/one.png""/>
</div>
用上面这种方式时,图片会显示出来,但有时间我们需要根据一个标志来设置具显示的哪一张图片,如下:
//dom 部分
<div class="selector">
<img :src="flag?one:two" @click="flag=!flag"/>
</div>
// 数据部分
data(){
retrun{
flag:true,
one:'/images/one.png',
two:'/images/two.png'
}
}
此时,图片不显示??????我们需要在地址前面加上 require才可以,如下修改:
// 数据部分
data(){
retrun{
flag:true,
one:require('/images/one.png'),
two:require('/images/two.png')
}
}
或者类似这样:
<img :src="require('/images/one.png')" alt="">
更多推荐
已为社区贡献32条内容
所有评论(0)