1

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

Improve this question
6
  • Dont upload screenshots of code, it makes it hard for us to read/ debug. Instead try and include a properly formatted Minimal, Reproducible Example. Commented May 19, 2022 at 14:55
  • You'll likely need to have the correct loader to handle that resource type (but you've not shared your Webpack/ Rollup / config). But what you've done isn't wrong, here's an example. Alternatively, place your assets within /public and just import them as normal, e.g. src="/my-img.png" Commented May 19, 2022 at 14:57
  • You can learn more about properly formatting your code blocks, including language identifiers here: How do I format my code blocks? Commented May 19, 2022 at 14:58
  • Unfortunately this is not the answer that I'm looking for. :/ I want to use v-for to get each images from my assets folder. I follow this video and I'd like to get the same result: youtube.com/watch?v=rZQ72SFGYwk Commented May 19, 2022 at 15:08
  • What you have should work, provided your folder structure is correct, if you just return the correct thing. The video you reference returns the correct thing, you don't. You need to return { carouselSlide } not carouselSlide Commented May 19, 2022 at 17:22

1 Answer 1

Reset to default
3

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments