vue3中使用require引入本地图片报错

需求：在vue3中动态引入本地图片报错require不是一个function

造成原因：查看vue3项目中使用的构建工具是vite还是Webpack；require方法是Webpack的内置function，无法在vite环境下运行

思路：改用动态引入方式即可（new URL + import.meta.url）

<template>
  <img :src="getImageUrl('image1.jpg')" alt="动态图片">
</template>

<script setup>
const getImageUrl = (name) => {
  return new URL(`./assets/${name}`, import.meta.url).href
}
</script>