vue图片懒加载

作者：殇丶離別发布日期:2026-03-11 浏览:70

<template>
  <div>
    <!-- 使用 v-lazy 指令来实现图片懒加载 -->
    <img v-lazy="imageSrc" alt="Lazy Loaded Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片的 URL 地址
      imageSrc: 'https://example.com/path/to/image.jpg'
    };
  }
};
</script>

<style>
/* 添加一些样式以确保图片容器的高度 */
[lazy=loading] {
  background-color: #f8f8f8;
}
</style>

<!-- 解释说明：
1. `v-lazy` 是一个自定义指令，用于实现图片懒加载。
2. `imageSrc` 是图片的 URL 地址，当图片进入视口时会自动加载。
3. `[lazy=loading]` 样式可以用来设置图片加载前的占位样式，比如背景颜色。
4. 需要引入一个支持懒加载的库（如 vue-lazyload），并在项目中注册该插件。 -->

上一篇：vue2路由

下一篇：vue createapp