image - Vue2：更改图像而不对已加载的图像重复 HTTP 请求

Question

我正在开发一个产品页面，该页面左侧有一个图片库，右侧有一个颜色选择。

见下图。

现在，每次选择一种颜色时，都必须在左侧显示一组图像。现在实现的方式是，每次更新颜色选择时，都会存储SelectedImages该特定颜色数组的更改值。

现在有意义的是，每当我切换到新颜色时，图像就会被加载。这正在发生。但我面临的问题是，无论何时更改颜色并SelectedImages更新数组，都会加载图像，无论它们是否较早加载。当它已经调用了一次图像时，我不希望它再次加载（发送 http）。

此外，我不想一次加载所有图像（4 色 x 4 图像 = 16 图像），这将再次无法执行。

我使用 vue 创建了这个 UI。它不是一个 vue 单一的应用程序，但它在某些需要的地方有 vue 组件。

呈现图像的代码。

  <div class="desktop-gallery"
    :class = "{ 'is_loading': isLoading }"
    v-bind:style="parentStyle"
    v-show="!onlyMobile">
      <div class="gallery-item"
      v-for="(image, index) in images" :key="index"
      ref="variableGallery"
      @click="handleGalleryZoom(index)"
      >
     <img :src="image"/>
      </div>
  </div>

标签： imageperformancevue.jsvuejs2vue-component