How to specify objects as images array (titles, description, etc)?

[demiro]

Hello,

I would like to have object instead of images URLs... interface is something like this: export interface IPhotoItem { title?: string; description?: string; thumbnailUrl?: string; photoUrl?: string; order?: number; }

would it be easy for me to implement this?

[hsuan9522]

Hello,

I would like to have object instead of images URLs... interface is something like this: export interface IPhotoItem { title?: string; description?: string; thumbnailUrl?: string; photoUrl?: string; order?: number; }

would it be easy for me to implement this?

I have same question. Have you already solved it?

[ovsw]

How I did it:

images: [
        {
          title: 'Catalie Portman',
          description: 'movie cat ',
          href: 'http://placekitten.com/1200/1200',
          poster: 'http://placekitten.com/300/200'
        },
        {
          title: 'Katy Purry',
          description: 'singing cat ',
          href: 'http://placekitten.com/1600/1200',
          poster: 'http://placekitten.com/300/200'
        },
       {
          title: 'Pet Fails',
          description: 'compilation',
          href: 'https://img.youtube.com/vi/hNdlUHBJDKs/maxresdefault.jpg',
          type: 'text/html',
          youtube: 'hNdlUHBJDKs',
          poster: 'https://img.youtube.com/vi/hNdlUHBJDKs/maxresdefault.jpg'
        }
]

[kkukelka]

How I did it:

images: [
        {
          title: 'Catalie Portman',
          description: 'movie cat ',
          href: 'http://placekitten.com/1200/1200',
          poster: 'http://placekitten.com/300/200'
        },
        {
          title: 'Katy Purry',
          description: 'singing cat ',
          href: 'http://placekitten.com/1600/1200',
          poster: 'http://placekitten.com/300/200'
        },
       {
          title: 'Pet Fails',
          description: 'compilation',
          href: 'https://img.youtube.com/vi/hNdlUHBJDKs/maxresdefault.jpg',
          type: 'text/html',
          youtube: 'hNdlUHBJDKs',
          poster: 'https://img.youtube.com/vi/hNdlUHBJDKs/maxresdefault.jpg'
        }
]

In order for this to work correctly, you have to change this line: :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }" to :style="{ backgroundImage: 'url(' + image.poster + ')', width: '300px', height: '200px' }" inside the corresponding

:ok_hand:

[eok8177]

How to set different url of image:

• in list - small image {{ image.thumb }}
• in slider - big image {{ image.full }}

[yehanny]

How to set different url of image:

• in list - small image {{ image.thumb }}
• in slider - big image {{ image.full }}

Hi, where do you change the slider image path? I've been struggling with this for hours, I get no image on slider, just the error symbol

Edit: This is what I did and now it's working

I have a json with this structure :

This is for images array:

[
  {
    "id": "1",
    "author": "John Doe",
    "width": 1024,
    "height": 768,
    "url": "http://localhost/assets/img/1.jpg",
    "download_url": "http://localhost/assets/img/1.jpg"
  },
]

I created another array with a forEach loop to extract only image's property "download_url" and used in the component data: function() { return { images: [], download_url: [], index: null, }

Now inside the div:

   <div
   class="image"
   v-for="(image, imageIndex) in images"
   :key="imageIndex"
   @click="index = imageIndex"
   :style="{ backgroundImage: 'url(' + image.url + ')', width: '300px' height: '200px' }"
   ></div>