实现方法
html代码:
<img :src="_img1" alt="" class="imgs">
<img :src="_img2" alt="" class="imgs">
js代码:
computed: {
// 1、网络图片,或后端返回的图片
_img1() {
let arr = `https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F4c%2Fa6%2F31%2F4ca631a8841304be2351295d50cf801d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623403810&t=ea28c65e7e60f68cd00d164cc70d3ceb`
return arr
},
// 2、本地图片
_img2() {
//
return require('../../assets/美女1.jpg')
},
},
注意:
1、src
属性要加冒号 :src
,表示动态的属性;
2、require
方法里面只能是字符串,不能是变量;否则会报错,报错原因是找不到图片;如果是本地的图片,要使用require
方法才行
拓展
1、如果想v-for多个图片,定义个数组即可
js:
data() {
return {
imgList:[require('../../assets/美女1.jpg'), require('../../assets/美女2.jpg'), require('../../assets/美女3.jpg')],
}
},
html:
<img :src="item" v-for="item in imgList" alt="" class="imgs">