vue3中图片动态引入

• 图片是想相对路径
  

这段代码的意思
1、new URL() 构造函数创建了一个新的 URL 对象。

2、这个 URL 对象的第一个参数是一个字符串，表示相对路径 ./assets/images/，这里假设这是图片文件存放的目录。

3、第二个参数 import.meta.url 是 Node.js 中的一个特殊变量，它指向当前模块文件的 URL 地址。

4、函数将传入的 url 参数附加到 ./assets/images/ 路径后面，得到了完整的图片路径。

5、最后，通过 path.href 返回这个完整的图片 URL 地址。

<template>
   <img style="width: 60px; height: 60px; border-radius: 50%" :src="getAssetsFile( state.ruleForm.imgSrc + '.jpg')" alt="">
</template>
 
<script setup>
import { ref, reactive } from 'vue'
const flag = ref(false)
function getAssetsFile = (url) => {
  return new URL(`../assets/head/${url}`, import.meta.url).href;
};

</script>
 
<style scoped>
img {
  width: 500px;
  height: 500px;
  vertical-align: middle;
}
</style>