如何从资产文件夹获取图像?

Question

我是初学者，目前正在学习vue.js。我尝试创建一个旋转滑块，但我无法从资产文件夹中获取我的图像。我没有找到任何能帮助我解决这个问题的方法。有人能帮我吗，为什么我在网站上看不到?

<template>
<div class="container">
<div class="title">Projects</div>
<Carousel class="carousel">
<Slide v-for="(slide, index) in carouselSlide" :key="index">
<div class="slide-info">
<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>

输入图片描述

Answer 1

我找到了解决方案。这段代码(require)在vue.js 3中不存在:

<img :src="require(`../assets/${slide}.jpg`)" />

运行:npm运行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>