在 Vue/Nuxt 图库组件中延迟加载图像

Question

我正在尝试创建一个简单的画廊组件，如果您单击某个图像，就会出现一个灯箱，您可以在其中看到完整尺寸的照片，并且可以选择下一张和上一张照片或关闭灯箱。

目前，当我需要将图像更改为下一张或上一张时，我更改了 img-tag 的 src 并且它起作用了。

我的问题来了。我想延迟加载我的图像。我在我的项目中使用 lazysizes。因此，加载图像的简单实现是添加 class “lazyload” 并传递属性 data-src 而不是 src.

但是，如果我更改为 data-src，我的下一张和上一张图像的方法将不起作用。

< script >
  export default {
    props: {
      data: {
        type: Array,
        required: true,
      },
    },
    data: () => ({
      visible: false,
      currentImage: 0,
    }),
    methods: {
      Toggle(index) {
        this.currentImage = index
        this.visible = !this.visible
      },
      Next() {
        if (this.currentImage !== this.data.length - 1) this.currentImage++
      },
      Prev() {
        if (this.currentImage !== 0) this.currentImage--
      },
    },
  } <
  /script>

<template>
  <div id="gallery" class="gallery">
  
    <!-- images grid -->
        <div v-for="(item, i) in data" :key="'gallery-image' + i" class="image">
            <img :src="item.image.thumbnail.url" @click.native="Toggle(i)" class="lazyload"/>
        </div>
    
    
    <!-- image lighbox on click -->
      <div v-if="visible" class="lightbox">
          <Icon class="cancel" @click="Toggle()"/>
          <Icon name="left" :class="{ disable: currentImage == 0 }"  @click="Prev()"/>
      <img :src="data[currentImage].image.url" class="lazyload"/> 
          <Icon name="right" :class="{ disable: currentImage == data.length - 1 }" @click="Next()"/>
      </div>
    
  </div>
</template>

更新我忘了添加关键代码。要在 Nuxt 项目中实现 lazysizes，我们需要在 nuxt.config.js 中添加以下代码。您可以阅读更多 here.

build: {
  extend(config, { isClient, loaders: { vue } }) { 
    vue.transformAssetUrls.img = ['data-src', 'src']
  },
},

当我在开发人员工具中进行调查时，我发现当触发点击下一张图片之类的方法时，图片的 src 没有改变，只有数据 src。我猜我需要一种方法来触发此转换，以便一切都能按预期工作。

Answer 1

此外，, I do recommend looking into the official nuxt image module which do have native lazy loading out of the box: https://image.nuxtjs.org/components/nuxt-img

您可以将它与一些简单的灯箱结合使用，以达到您的目的。我以前用过vue-silentbox，效果很好。

那里可以有那种代码

<silent-box :gallery="photosToDisplay">
  <template #silentbox-item="{ silentboxItem }">
    <img :src="silentboxItem.src" :key="silentboxItem.id" />
  </template>
</silent-box>

所以，我猜你完全可以把 img 换成 nuxt-img，然后延迟加载。
项目中的图像不是延迟加载的，但是 here 是一个小项目，如果您想快速查看它的呈现方式，我会尝试使用灯箱（URL 在右上角） .

Answer 2

这可能不是最优雅的方式。我 force re-render 到我的图像组件。您需要为组件分配一个 key 值，并且每当该值更改时都会创建该组件的新实例。

在 Vue/Nuxt 图库组件中延迟加载图像

Lazyload image in Vue/Nuxt gallery component

lazy-loading

image

gallery

vue.js

nuxt.js