一、图片的预览效果
本次实现是在vue-cli中实现的路由来实现图片的预览效果
第一步定义两个组件命名为HelloWorld.vue和Layer.vue
第二步需要配置两个组件的前端路由
代码如下：
第三步在HelloWorld的组件中完成需要预览的小图片如图
此实现比较简单css布局不做过多说明，使用router-link把参数传递到layer组件
HelloWorld组件中代码如下，
Layer组件中的代码如下，通过定位和margin将图片实现上下和左右同时居中，并通过router-link返回到HelloWorld页面
以上是通过vue路由实现。
另外可以通过第三地方的api（钉钉api）来实现图片的预览功能
即 给小图片添加点击事件，来调用钉钉的api预览图片
代码实现如下：
调用的maxImg方法:
二、图片的模糊效果
先看效果对比
代码设置
项目中的应用
描述：背景是一张模糊的图片，同时有一个半透明蒙层
实现方法
html部分代码：
header是最外层的盒子，样式为
然后设置背景图的样式
当不给header添加overflow:hidden属性的时候，由于我们给背景图片使用了filter属性会导致背景图的阴影溢出，如下图
所以需要给header添加overflow:hidden属性
以上是自己在项目实践中的实现方法，大家有其他的方法实现的欢迎来讨论，指导！
