将 img srcset 与 Vue.js 中的数组和数据对象绑定

Question

我有一个数组中的图像名称列表，但我想在它们前面加上一个主机并添加一些有趣的大小选项以响应。这是我所拥有的：

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?']
  }
});

我可以在 html 中做一些笨拙的 v-bind，这很有效：

<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 这确实有效！但我认为有更好的方法。而不是必须不断地写所有这些 host+image+size+host+image+size 。如果我可以为此做一个功能并轻松地在我网站的所有页面上使用它，那就太好了。

所以我尝试构建它。我在想也许可以添加一个计算函数：

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

中看到

是否有 eloquent 方法在 srcset 中传递函数以动态加载所有这些具有各种响应大小的图像？

Answer 1

问题是，您只为每个组件定义一个计算属性。 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>

将 img srcset 与 Vue.js 中的数组和数据对象绑定

Binding an img srcset with an array and data object in Vue.js

arrays

image

responsive-design

vue.js

responsive-images

使用方法

使用子组件