How to dynamically bind img using props

Refresh

April 2019

Views

6 time

0

I am trying to bind dynamically the img using props but image is not displaying due to path.

I tried using require but unable to do so i.e require('[email protected]/assets/logo.png') Am I doing correct way?

<template>
<swiper :options="swiperOption">
          <!-- slides -->
          <swiper-slide>
            <part picture="require('[email protected]/assets/logo.png')" title="Pencard"/>
          </swiper-slide>
          <swiper-slide>
            <part picture="require('[email protected]/assets/logo.png')" title="Register"/>
          </swiper-slide>
          <swiper-slide>
            <part picture="require('[email protected]/assets/logo.png')" title="Service"/>
          </swiper-slide>

</template>

<template>
<div class="container">
    <div class="row">
        <div class="col-md-12">
        <img :src="picture"/>
        <div class="content">
            <h1>{{ title }}</h1>
        </div>
        </div>
            </div>

    </div>
</template>

Image is not displaying.

0 answers