VueJs-tinder轻扫

Question

我找到了一个看起来像Tinder刷卡器的示例

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

现在我想将自己的图片放入该组件中，但是如果我创建带有图片的Array并设置比Array内的名称v-for="i in images"并设置{{1} }，则图片无法正确显示。

那我该如何正确地从阵列中看到图像呢？

所以我更改了此代码：

<img :src="i.src" />

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

Array

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>