Связывание img srcset с массивом и объектом данных в Vue. js - PullRequest
Новая
       53

Связывание img srcset с массивом и объектом данных в Vue. js

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

У меня есть список имен изображений в массиве, но я хочу поставить перед ними префикс с хостом и добавить несколько забавных вариантов размеров для адаптивного ответа. Вот что у меня есть: 

new Vue({
  el: '#gallery_images',
  data: {
    desktop: 'w=400&h=400&fit=crop&crop=faces,entropy&auto=format,compress 400w,',
    ipad: 'w=600&h=600&fit=crop&crop=faces,entropy&auto=format,compress 600w,',
    mobile: 'w=900&h=900&fit=crop&crop=faces,entropy&auto=format,compress 900w,',
    responsive: 'w=1200&h=1200&fit=crop&crop=faces,entropy&auto=format,compress 1200w',
    host: 'https://tom.imgix.net/artsy/',
    images: [ '1.jpg?', '2.jpg?', '3.jpg?', '4.jpg?', '5.jpg?', '6.jpg?']
  }
});

Я могу сделать несколько неуклюжих v-bind в html, и это работает: 

<div id="gallery_images">  
<img v-for="image, in images" :src="'https://tom.imgix.net/artsy/' + image" v-bind:srcset="host + image + desktop + host + image + ipad + host + image + mobile + host + image + responsive" sizes="(min-width: 1240px) 33vw, 100vw"/>
</div>

[Codepen] https://codepen.io/daletom/pen/WNvNgOa Это действительно работает! Но я думаю, что есть лучший способ. Вместо того, чтобы писать все это хост + изображение + размер + хост + изображение + размер снова и снова. Было бы хорошо, если бы я мог просто сделать функцию для этого и легко использовать ее на всех своих страницах на моем сайте.

Итак, я попытался построить это. Я подумал, может быть, добавить вычисляемую функцию: 

computed: {
    vueSDK: function () {
      return this.host + this.images + this.desktop + this.host + this.images + this.ipad + this.host + this.images + this.mobile + this.host + this.images + this.responsive
    }
  }

Затем просто передать функцию в srcset: 

<div id="gallery_images">  
<img v-for="image, in images" :src="host + image" v-bind:srcset="vueSDK" sizes="(min-width: 1240px) 33vw, 100vw"/>
</div>

Но это не работает. Он просто возвращает одно и то же первое изображение снова и снова. Вы можете увидеть в этом [codepen] https://codepen.io/daletom/pen/QWbJKPp

Существует ли красноречивый способ передать функцию в srcset для динамической загрузки всех этих изображений с различными адаптивными размерами?

1 Ответ

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

Проблема в том, что вы определяете только одно вычисляемое свойство для каждого компонента. v-for требует вычисляемого свойства для каждой итерации. Самый простой способ сделать это - использовать метод вместо вычисляемой переменной (с недостатком потери кеша вычисляемой переменной). Если вы перебрали дочерние компоненты, вы также можете иметь вычисляемую переменную в каждом из этих дочерних компонентов. Я бы предпочел второй вариант. Вот примеры этих двух параметров:

Использование метода 

<template>
  <img v-for="image in images" :src="host + image" :srcset="getSrcset(image)" sizes="(min-width: 1240px) 33vw, 100vw" />
</template>

<script>
export default {
  data () {
    return {
      host: ...,
      images: ...
    }
  },
  methods: {
    getSrcset () {
      return ...;
    }
  }
};

Использование дочернего компонента

В родительском компоненте: 

<custom-image v-for="image in images" :image="image" />

И дочерний компонент: 

<template>
  <img :src="host + image" :srcset="srcset" sizes="(min-width: 1240px) 33vw, 100vw" />
</template>

<script>
export default {
  props: 'image',
  data () {
    return {
      host: ...
    }
  },
  computed: {
    srcset () {
      return ...
    }
  }
};
</script>
...