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

Question

我正在尝试创建一个简单的图库组件，如果您单击某个图像，将出现一个灯箱，您可以在其中看到全尺寸照片，并具有下一张和上一张照片等选项或关闭灯箱。

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

我的问题来了。我想延迟加载我的图像。我在我的项目中使用lazysizes。 因此，加载图像的简单实现是添加“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 项目中实现惰性大小，我们需要在 nuxt.config.js 中添加休闲代码。你可以阅读更多here。

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

当我在开发者工具中调查时，我发现当触发像 Next image 这样的方法时，图像的 src 没有改变，只有 data-src。我猜我需要一种方法来触发这种转换，以便一切都能按预期工作。

Answer 1

另外，on top of my comment，我确实建议查看官方nuxt image module，它确实具有开箱即用的本机延迟加载：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>

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

Answer 2

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