I'm beginner and I currently learn vue.js. I try to create a carousel slider but I can't get my images from the assets folder. I don't find any solution that it helps me to solve the problem. Can anyone help me, why I don't see on the site?

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

enter image description here

CodePudding user response：

I found the solution. This code (require) doesn't exist in vue.js 3:

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

Run: npm run build and you'll get dist folder where you can save your images then call from there. It works for me.

So the solution is:

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