Vue.js - How to display pictures in Vueper Slides?

Question

I want to use Vueper Slides in my project - https://antoniandre.github.io/vueper-slides/. I need to import pictures from my database (JSON), but the problem is that pictures cannot be displayed. I tried many things but unsuccessfully.

Here is my code (template).

<vueper-slides
class="no-shadow"
:visible-slides="3"
:slide-ratio="1 / 4"
:dragging-distance="70">
   <vueper-slide
      v-for="i in 9" :key="i" :title="i.toString()" />
    </vueper-slides>


export default {
  data: () => ({
    slides: [
      {
        title: "Slide #1",
        content: "Slide content.",
      },
    ],
  }),
  components: {
    VueperSlides,
    VueperSlide,
  }

Answer 1

You can pass image parameter to slide object like this

slides: [
      {
        title: "Slide #1",
        content: "Slide content.",
        image: "http://example.com/image.jpg"
      },
    ],