VUE-使用img标签时,动态设置图片地址
程序员文章站
2024-01-19 14:08:04
...
<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')
}
}