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