javascript - VueJs-tinder 刷卡器

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'}
  ]

标签： javascriptvue.jsvuejs2

Answer 1

在您提供的 JSFiddle 的源代码中，作者使用的是background-image样式中的图像 url。尝试将您的代码段更改为：

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