Почему при использовании Sanity.io используется только первый источник моего адаптивного изображения? - PullRequest
Новая
       14

Почему при использовании Sanity.io используется только первый источник моего адаптивного изображения?

0 голосов
/ 24 марта 2020

Я пытаюсь создать компонент для адаптивных, прогрессивных изображений в Nuxt. Данные изображения получены из Sanity. Я также пытаюсь использовать библиотеку lazysizes в этом компоненте (https://www.npmjs.com/package/lazysizes). Когда я тестирую компонент, используется только первый источник изображения.

Здесь код компонента: 

<template>
  <picture :role="role">
    <source
      v-for="(val, index) in sizes"
      :key="index"
      :media="`(min-width: ${val.media}px)`"
      :data-srcset="`${getSrcSet(val.width)}`"
    />
    <img
      :data-src="src"
      :alt="alt"
      class="lazyload"
    />
  </picture>
</template>
<script>
import imageUrlBuilder from '@sanity/image-url'
import sanity from '~/plugins/sanity'

const builder = imageUrlBuilder(sanity)

export default {
  props: {
    image: {
      type: Object,
      required: true
    },
    sizes: {
      type: Object,
      default () {
        return {
          s: { media: 0, width: 640 },
          m: { media: 640, width: 768 },
          l: { media: 768, width: 1024 },
          xl: { media: 1024, width: 1600 }
        }
      }
    },
    alt: {
      type: String,
      default: 'Missing caption'
    },
    role: {
      type: String,
      default: 'img'
    },
    fit: {
      type: String,
      default: 'clip'
    },
    quality: {
      type: Number,
      default: undefined
    },
    w: {
      type: Number,
      default: undefined
    },
    h: {
      type: Number,
      default: undefined
    },
    format: {
      type: String,
      default: undefined
    }
  },
  computed: {
    src () {
      return builder
        .image(this.image)
        .width(this.w)
        .height(this.h)
        .quality(this.quality)
        .fit(this.fit)
        .format(this.format)
    }
  },
  methods: {
    getSrcSet (w, dpr = 1) {
      if (!this.h) {
        return builder
          .image(this.image)
          .width(w * dpr)
          .quality(this.quality)
          .fit(this.fit)
          .format(this.format)
      }
      return builder
        .image(this.image)
        .width(w * dpr)
        .height(this.getHeightFromWidth(w, this.getAspectRatio()) * dpr)
        .quality(this.quality)
        .fit(this.fit)
        .format(this.format)
    },
    getHeightFromWidth (w, h) {
      return Math.floor(w * h)
    },
    getAspectRatio () {
      return this.h / this.w
    }
  }
}
</script>
...