VueJs-трут свайпер

Question

Я нашел этот пример, который выглядит как Tinder swiper

JSFiddle: https://jsfiddle.net/JohnnyDan/z9ev725e/21/?utm_source=website&utm_medium=embed&utm_campaign=z9ev725e

И теперь я хочу поместить свои собственные изображения в этот компонент, но если я создаю Array с изображениями и настройкой, отличной от Array, например, v-for="i in images" и настройкой <img :src="i.src" />, тогда изображения не будут отображаться правильно.

Итак, как я могу сделать это правильно, чтобы видеть свои изображения из массива??

Итак, я изменил этот код:

    `<template slot-scope="{data}">
       <div
         class="pic"
         v-for="i in images"
       >
        <img :src="i.src" />
       </div>
    </template>`

Мой Array

images: [
    { src: 'https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/nope-txt.png' },
    { src: 'https://johnnydan.oss-cn-beijing.aliyuncs.com/vue-tinder/like-txt.png'}
  ]

Answer 1

В указанном вами источнике JSFiddle автор использует URL-адрес изображения в стиле background-image.Попробуйте изменить свой фрагмент на что-то вроде:

<template slot-scope="{data}">
   <div
     class="pic"
     v-for="i in images"
   >
    <img :style="`background-image:url(${i.src})`" />
   </div>
</template>