vue3中图片引入

weixin456227192024-08-09 20:02

说明：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>