Responsive design 如何在Vue.JS的v-for循环中使用srcset提供响应图像？

我想循环设置一组图像，它们应该使用srcset属性进行响应。现在，我只是循环浏览小缩略图：

         thumbnails: {
            small: [
              'http://placehold.it/330x330',
              'http://placehold.it/330x330',
              'http://placehold.it/330x330'
            ],
            medium: [
              'http://placehold.it/900x900',
              'http://placehold.it/900x900',
              'http://placehold.it/900x900'
            ], 
            high: [
              'http://placehold.it/1400x1400',
              'http://placehold.it/1400x1400',
              'http://placehold.it/1400x1400'
            ]
          },

selectedThumbnail

应该绑定到

图像缩略图--hero img

，但由于该部分现在使用的是响应图像，所以很难使其正常工作，因为我不知道应该选择并显示哪个分辨率的图像（小、中、高）

总而言之，有两个问题我觉得很难解决

• 使用v-for显示响应迅速的图像
• 当用户单击关联的缩略图时显示高分辨率图像（英雄图像）

英雄图像和缩略图图像都应具有响应性

---

如有任何见解，将不胜感激

你不能直接将索引值从v-for传入：

：srcset=“

${project.thumbnails.small[index]}300w，${project.thumbnails.medium[index]}900w，${project.thumbnails.high[index]}1400w

”

而不是硬编码该值吗？你不能直接将索引值从v-for传入：

：srcsset=“

${project.thumbnails.small[index]}300w，${project.thumbnails.medium[index]}900w，${project.thumbnails.high[index]}1400w

“

而不是硬编码值？

         thumbnails: {
            small: [
              'http://placehold.it/330x330',
              'http://placehold.it/330x330',
              'http://placehold.it/330x330'
            ],
            medium: [
              'http://placehold.it/900x900',
              'http://placehold.it/900x900',
              'http://placehold.it/900x900'
            ], 
            high: [
              'http://placehold.it/1400x1400',
              'http://placehold.it/1400x1400',
              'http://placehold.it/1400x1400'
            ]
          },

        <div class="image-thumbnails">
          <ul class="list-unstyled">
            <li v-for="thumbnail in project.thumbnails.small" @click="swapThumbnail(thumbnail)">
              <img class="lazy" :data-src-lazy="thumbnail" alt="thumbnail" width="100">
            </li>
          </ul>
        </div>

swapThumbnail(imgUrl) {
    this.selectedThumbnail = imgUrl;
  }