图片预览

it2023-04-11  69

使用原生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>

 

最新回复(0)