如何在Vue.js中实现图片模糊效果？附Next.js示例参考

下面提供两种简单的实现方案，效果和你给出的参考图一致：

一、使用v-lazy-image插件快速实现 #

这个插件内置了懒加载和占位图切换逻辑，能快速复刻Next.js的图片模糊效果：

步骤1：安装依赖 #

npm install v-lazy-image
# 或
yarn add v-lazy-image

步骤2：完整组件代码 #

<template>
  <div class="image-wrap">
    <!-- 定义SVG模糊滤镜 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filter-hidden">
      <defs>
        <filter id="blur">
          <feGaussianBlur in="SourceGraphic" :stdDeviation="blurLevel" />
        </filter>
      </defs>
    </svg>
    <!-- 懒加载图片组件 -->
    <v-lazy-image
      :src="targetImg"
      :src-placeholder="blurPlaceholder"
      @load="onImageLoaded"
      :class="{ 'loaded': isLoaded }"
      class="blur-image"
    />
  </div>
</template>

<script>
import VLazyImage from 'v-lazy-image'

export default {
  components: {
    VLazyImage
  },
  data() {
    return {
      targetImg: '你的高清图片地址',
      blurPlaceholder: '低分辨率占位图地址', // 建议用原图压缩到极小尺寸（如20x20px）
      blurLevel: 8, // 模糊程度，数值越大越模糊
      isLoaded: false
    }
  },
  methods: {
    onImageLoaded() {
      this.isLoaded = true
    }
  }
}
</script>

<style scoped>
.image-wrap {
  position: relative;
  width: 100%;
  height: 300px; /* 根据需求自定义尺寸 */
  overflow: hidden;
}

.filter-hidden {
  position: absolute;
  width: 0;
  height: 0;
}

.blur-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s ease;
  filter: url(#blur);
}

.blur-image.loaded {
  filter: none;
}
</style>

二、手动实现（无需插件） #

参考渐进式图片渲染思路，自己写逻辑更灵活：

<template>
  <div class="progressive-img-container">
    <!-- 模糊占位图 -->
    <img 
      :src="placeholderImg" 
      alt="占位图"
      class="placeholder-img"
    />
    <!-- 高清目标图 -->
    <img 
      :src="targetImg" 
      :alt="imgAlt"
      class="target-img"
      @load="onImgLoad"
      :class="{ 'loaded': isLoaded }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      targetImg: '高清图片地址',
      placeholderImg: '低分辨率占位图地址',
      imgAlt: '图片描述',
      isLoaded: false
    }
  },
  methods: {
    onImgLoad() {
      this.isLoaded = true
    }
  }
}
</script>

<style scoped>
.progressive-img-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.placeholder-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px);
  transform: scale(1.1); /* 放大避免模糊后出现边缘空白 */
}

.target-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.target-img.loaded {
  opacity: 1;
}
</style>

关键注意点 #

• 占位图建议用原图压缩到极小尺寸（如20x20px），这样加载速度快，放大后模糊效果自然
• 可以结合Intersection Observer API实现滚动懒加载，只有当图片进入视图时才加载高清图

内容的提问来源于stack exchange，提问作者Yewin