如何在 vue 项目中预加载图片答案

【问题标题】：How to pre-load images on vue project如何在 vue 项目中预加载图片
【发布时间】：2021-06-27 12:52:34
【问题描述】：

我想加载页面上的所有图像以进行预加载（当路由更改时）。我使用的所有图像都存储在本地。当我测试滚动时正在加载网络图像。我需要在页面装载而不是滚动上加载图像。

 <div class="text-center" style="margin-top: 10vh;">
  <v-layout row wrap justify-center>
    <v-flex
      md12
      align-self-center
      data-aos-easing="linear"
      data-aos-delay="100"
      data-aos="fade-up"
      data-aos-duration="1500"
    >
      <v-img
        contain
        height="90vh"
        src="../assets/chamika_house/_SDS3575.jpg"
      ></v-img>
    </v-flex>
  </v-layout>
</div>
<div style="width:99vw;height:36vh;padding:10px"></div>

<div>
  <v-img
    contain
    height="95vh"
    src="../assets/chamika_house/_SDS3429.jpg"
    data-aos="fade-up"
    data-aos-easing="linear"
    data-aos-delay="100"
    data-aos-duration="1500"
  ></v-img>
</div>

【问题讨论】：

标签： javascript vue.js vue-component vuex vue-router

【解决方案1】：

<v-img> 有一个 eager prop 可以禁用延迟加载：

<v-img eager />

【讨论】：

是的，滚动加载称为“延迟加载”。