vue项目中实现图片预览的公用组件功能

今天产品提出了一个查看影像的功能需求。在查看单据的列表中，有一列是影像字段，一开始根据单据号调用接口查看是否有图片附件，如果有则弹出一个全屏的弹出层，如果没有给出提示。所以，根据需求，多个组件需要用到查看影像的功能，所以考虑做一个公用组件，通过组件传值的方法将查看影像文件的入参传过去。后来，产品要求图片可以旋转缩放。废话不多说，贴上代码：后来出现一个问题，有一类的单据的图片存储在数据库中，之前的图片都是存储在服务器中，只需要传入单据号查询返回给我图片路径即可。而存储在数据库当中不一样，需要拼接路径，一下是解决方法：一般情况下，图片的预览，图片存储在服务器中，数据库中一般只存储路径。