动态绑定img

今天在vue的开发中， i动态绑定mg的src属性绑定url变量，然而图片加载失败。

这是我的写法  ：

html

        <img :src="imgurl" />

js

let imgurl = ref('../img/R-C.png')

看着并没有问题，但是并没有显示出图片。

经过一番查找后，了解到，如果是本地的图片，要使用require方法才行，require方法里面只能是字符串，不能是变量；否则会报错，报错原因是找不到图片；

以下是我找到的动态绑定的写法：

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')
    }
}

如果require报错，可以看这篇文章解决Vue3+TypeScript项目报错: 找不到名称“require”。是否需要为节点安装类型定义?_找不到名称 "require"。是否需要为节点安装类型定义?-CSDN博客