vue3导入本地图片2种实现方法

果子切克now2024-10-05 15:20

在<script setup>中使用import语法：

javascript 复制代码

<template>
  <img :src="logo" alt="Logo">
</template>
 
<script setup>
import logo from './assets/logo.png';
</script>

使用Vue的ref来动态地在<script setup>中更换图片：

javascript 复制代码

<template>
  <img :src="imageSrc" alt="Dynamic Image">
  <button @click="changeImage">Change Image</button>
</template>
 
<script setup>
import { ref } from 'vue';
 
const imageSrc = ref('./assets/logo.png');
 
function changeImage() {
  imageSrc.value = './assets/other-image.png';
}
</script>

方法二：使用new URL(url, import.meta.url)

javascript 复制代码

<script setup>
import { ref } from "vue";
const Img = ref("");
Img.value = new URL(
  "@/assets/xxxx.jpg",
  import.meta.url
).href;
</script>