我是初學者，目前正在學習 vue.js。我嘗試創建一個輪播滑塊，但我無法從資產檔案夾中獲取我的影像。我沒有找到任何可以幫助我解決問題的解決方案。誰能幫幫我，為什么我在網站上看不到？
<template>
<div >
<div >Projects</div>
<Carousel >
<Slide v-for="(slide, index) in carouselSlide" :key="index">
<div >
<img :src="require(`../assets/${slide}.jpg`)" />
</div>
</Slide>
</Carousel>
</div>
</template>
<script>
import Carousel from "../utility-components/Carousel.vue";
import Slide from "../utility-components/Slide.vue";
export default {
setup() {
const carouselSlide = ["bg-1", "bg-2", "bg-3"];
return carouselSlide;
},
components: { Carousel, Slide },
};
</script>
在此處輸入影像描述
uj5u.com熱心網友回復：
我找到了解決方案。vue.js 3 中不存在此代碼（要求）：
<img :src="require(`../assets/${slide}.jpg`)" />
運行：npm run build，你會得到 dist 檔案夾，你可以在其中保存影像，然后從那里呼叫。這個對我有用。
所以解決方案是：
<template>
<img :src="picture.pic" />
</template>
<script>
import { ref } from "vue";
const loadImage = async () => {
return new Promise((resolve) => {
resolve({
pic: "dist/assets/bg-1.jpg",
});
});
};
};
export default {
async setup() {
const picture = ref(await loadImage());
return {
picture,
};
},
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/479364.html