图片预览

最新推荐文章于 2020-10-26 20:22:15 发布

enmmmm

最新推荐文章于 2020-10-26 20:22:15 发布

阅读量183

点赞数

分类专栏：知识补充文章标签： javascript vue.js

本文链接：https://blog.csdn.net/enmmmm/article/details/109181573

版权

知识补充专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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