前言：很多时候我们在开发的时候需要动态引入图片，在Vue2中可以用require()来实现这个，但是Vue3中却不支持require()。

方法一

  • 给scr绑定一个函数
1
<img :src="getImageUrl(img)" alt="" />
  • 获取照片的函数
1
2
3
function getImageUrl(img : any) {
    return new URL(`../assets/Img/${img}.jpg`, import.meta.url).href;
}

new URL()

  • 用于创建一个新 URL 对象
1
new URL(url, [base])
  • url —— 完整的 URL，或者仅路径（如果设置了 base）
  • base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。
  • import.meta.url是base url（根链接）