不确定如何在我的 vue 项目中使用灯箱？

Question

I'm currently trying to use lightbox in my project! And as you notice I using a (v-for) for the items array.
How to integrated lightbox with v-for items?

vue-image-lightbox A simple image lightbox component for Vuejs https://www.npmjs.com/package/vue-image-lightbox

<div class="items" v-scroll-reveal.reset>
   <md-card 
      v-for="(product,index) in products"
      :key="index"
      v-show="product.type === activeProduct">

      <md-card-media md-ratio="16:9">
        <img :src="require(`../assets/img/products/${product.img}`)"/>
      </md-card-media>

   </md-card>
</div>

Answer 1

Replace the img with <LightBox :images="images"></LightBox> . As per the examples in the npm page, the images variable is an object that holds multiple resolutions of the picture.

The elements should be rendered automatically afterwards.