vue中实现动态引入静态资源

小伙伴们在写代码的过程中大部分的资源都是从后端返回接受到的，如果遇到静态资源需要动态操作的情况下，很多小伙伴就不太熟悉了，今天分享一种刚学习到的方法

首先介绍我们要用的 URL（）函数

URL()

URL() 构造函数返回一个新创建的 URL 对象，表示由一组参数定义的 URL。

如果给定的基本 URL 或生成的 URL 不是有效的 URL 链接，则会抛出一个TypeError。

语法

const url = new URL(url [, base])

这里有两个参数，url和 base

url

表示一个绝对或者相对的地址，如果是一个相对的 URL，则会将 base 用作基准 URL。如果 url 是绝对 URL，则无论参数base是否存在，都将被忽略。

base

是一个表示基准 URL 的 DOMString，在 url 是相对 URL 时，它才会起效。如果未指定，则默认

为 ' '

既然有相对url的方法，那我们就可以利用这个函数来达到我们动态引入静态资源的目的了

这里以vue3为例

<script setup>

const getImgSrc = (str)=>{             //创建一个可以接收参数的函数
   return new URL(`../assets/image/${str}.jpg`,import.meta.url).href
   //返回一个url对象 第一个参数是静态资源相对于本页面的地址，第二个参数是本页面的地址
}
</script >

在这里我们可以打印一下import.meta.url

↑这就是本页面的地址

再打印一下整体的 new URL(`../assets/image/${str}.jpg`,import.meta.url)

 可以看到这是一个对象，里面的href属性即是拼接后的静态资源的地址

我们接下来只要在需要的地方调用getImgSrc函数并传参就可以实现动态选择静态资源啦

和我一样的新手宝宝们注意传的参数是字符串形式哦

<img :src="getImgSrc('demo-1')" alt="">

希望能帮到大家