vue3中图片引入
说明：vue2项目一般使用vuecli，支持require进行导入，而在vue3中使用了vite不支持使用require进行引入
vue2中图片引入
<template><div><div> 测试 </div></div>
</template>
<script>
export default {data() {return {img: require('@/assets/xxxxx.jpg'),}},methods: {},
}
</script>
vue3中图片引入
方法一：使用 import导入资源
<script setup>
import { ref } from "vue";
import source from "@/assets/xxxx.jpg";
const Img = ref("");
Img.value = source;
</script>
方法二：使用new URL(url, import.meta.url)
<script setup>
import { ref } from "vue";
const Img = ref("");
Img.value = new URL("@/assets/xxxx.jpg",import.meta.url
).href;
</script>