img标签的src属性动态绑定图片

实现方法

html

	<img :src="img1">
	<img :src="img2">

js

computed: {
    // 1、网络图片，或后端返回的图片
    img1() {
      let imgUrl = `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 imgUrl
    },
    // 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" :key="item">