使用原生JS的图片预览(仅有简单的点击放大功能)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #containerId { position:fixed; z-index:2000; left:50%; top:50%; transform:translate(-50%,-50%); } #bigImgId { width:1000px; height:500px; } </style> <script > function viewImg(){ let smallImg = document.getElementById('smallImgId'), bigImg = document.getElementById('bigImgId'), container = document.getElementById('containerId'), imgSrc = smallImg.getAttribute('src'); bigImg.setAttribute('src',imgSrc); container.style.display = "block"; } function closeViewImg(){ let container = document.getElementById('containerId'); container.style.display = "none"; } </script> </head> <body> <img id="smallImgId" onclick="viewImg()" src="本地图片路径\dog.png"/> <div style="display:none;" id="containerId" > <img onclick="closeViewImg()" src="" id="bigImgId" /> </div> </body> </html>图片预览插件v-viewer(用于 Vue 的图像查看器)---可放大、缩小、旋转等
v-viewer官网地址:https://mirari.cc/v-viewer/
1、npm install v-viewer;
2、import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';
Vue.use(Viewer);
3、使用:
1)以指令的形式使用:v-viewer(可以在任意标签上使用,该标签下的img元素即具有预览功能)。设置配置项(option):
v- viewer="{movable: false}"。
2)以组件的形式使用:使用插槽放置图片
<viewer :options="options" :images="images" @inited="inited" class="viewer" ref="viewer"> <template slot-scope="scope"> <img v-for="src in scope.images" :src="src" :key="src"> {{scope.options}} </template> </viewer> <script> import 'viewerjs/dist/viewer.css'; //引入样式 import Viewer from "v-viewer/src/component.vue"; //引入组件 // component中引入 components: { Viewer }, methods: { inited(viewer) { this.$viewer = viewer; } } </script>