q-carousel with v-for

cclain

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 ?

s.molinari

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

:img-src="image.url"

Scott

cclain

@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’)”

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

cclain

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