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

问题描述

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

目前，当我需要将图像更改为下一个或上一个时，我更改了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 中添加休闲代码。你可以在这里阅读更多。

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

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

标签： imagevue.jsnuxt.jslazy-loadinggallery

此外，除了我的评论之外，我建议您查看官方的nuxt 图像模块，该模块确实具有开箱即用的本机延迟加载：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，并让它延迟加载。
图片不是在项目中延迟加载的，但是如果你想快速查看它的呈现方式，我做了一个小项目来尝试灯箱（右上角的 URL）。

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

问题描述

解决方案

推荐阅读