css -- 如何让图片展示模糊的效果？

一般展示图片，仅需要能后展示出来即可。如：

但是，如果需要展示模糊的效果，该如何调整呢？
期望效果如下：

刚开始思路是想在图片上面盖上一个容器，然后调整容器的透明度，发现效果并不理想。
效果如图：

然后研究了一下css的，发现CSS有一个属性filter。
作用是将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
将该属性设置给图片即可。
代码:

<template>
	<image src='...'/>
</template>

<style>
image{
	filter: blur(5px); //具体效果可自行调整
}
</style>

如此即可实现图片模糊效果