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

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>

enter image description here

Answer 1

我找到了解决方案。此代码（要求）在 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>

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

How to get images from assets folder?

slider

carousel

vue.js