- 在
<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>