uniapp image 空白区域模糊效果

UniApp 的 Image 组件默认显示的是图片的清晰内容，如果你想要在空白区域添加模糊效果，可以采用一种叫做“懒加载”（lazy loading）的技术，或者自定义一个遮罩层来实现。以下是简单的步骤：

1. **懒加载**：在 Image 标签上设置 `lazy` 属性为 `true`，当图片还未加载完成时，用户看到的部分会呈现为模糊的效果，等图片加载后再展现清晰的图像。

<image src="default-blurred-image.jpg" lazy></image>

2. **自定义遮罩**：可以在页面上添加一个透明度低的 `<view>` 或 `<canvas>` 元素作为遮罩，并在图片加载完成后隐藏它。例如：

<template>
  <view class="blur-mask" v-if="!imageLoaded">
    <!-- 设置背景颜色和模糊度 -->
    <canvas :style="{ background: 'rgba(0, 0, 0, 0.5)', filter: 'blur(2px)' }"></canvas>
  </view>
  <image :src="imageUrl" @load="imageLoaded = true"></image>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      imageLoaded: false,
    };
  },
};
</script>

在这个例子中，当你需要的时候，把 `imageUrl` 设定为实际的图片地址，当图片加载完成 (`imageLoaded` 为真) 时，遮罩就会消失，只显示清晰的图片。