No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    q-carousel with v-for

    Help
    2
    5
    941
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cclain last edited by

      Hi, I’m new in quasar and i’m trying to use a carousel to show some images in static repository, and i having problems to use v-for directive with q-carousel-slide.

      so i start with a simple

            <q-carousel-slide
            v-for="(image) in images"
            :key="image.id"
            :name="image.id"
            img-src="../statics/myImage.jpeg"
            />
      

      and it’s ok, for each image in images i see the same image.

      next i wanna print each image in carousel, so i use this:

            <q-carousel-slide
            v-for="(image) in images"
            :key="image.id"
            :name="image.id"
            :img-src="require(image.url)"
            />
      

      and i have the following error :

      [Vue warn]: Error in render: "Error: Cannot find module '../statics/1.jpeg'"
      

      ( my data :

      images: [
              {
                id: 1,
                url: '../statics/1.jpeg'
      
              }
          ]
      

      )
      I have already read this topic : https://forum.quasar-framework.org/topic/5768/carousel-with-v-for?_=1595405298650

      did i forgot something ?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by s.molinari

        Try just adding the property for the image URL without the require.

        :img-src="image.url"

        Scott

        1 Reply Last reply Reply Quote 0
        • C
          cclain last edited by

          @s-molinari
          Thanks for the advice,
          but that doesn’t work,
          as I read in the documentation I need to use required :
          (relative path format): src=“require (’. /my_img.jpg’)”

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by s.molinari

            Ok. I see. If you re putting it in statics as in your example above, then just use the statics folder path without require. If your image is anywhere else in your project folders other than statics or assets, then use require.

            Scott

            1 Reply Last reply Reply Quote 0
            • C
              cclain last edited by

              I have finally resolved my problem you need to use require like that
              {
              id: 1,
              url: require(‘src/assets/1.jpeg’)
              },

              1 Reply Last reply Reply Quote 0
              • First post
                Last post