mui.previewimage 图片预览，点击图片放大缩小

最新推荐文章于 2022-08-19 17:54:02 发布

耳东君呐

最新推荐文章于 2022-08-19 17:54:02 发布

阅读量1.2k

点赞数 3

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/chenchang0419/article/details/119380210

版权

本文介绍了如何使用mui库在前端实现图片预览功能，包括页面引入mui的css和js文件，为img元素添加特定属性，以及展示完整的代码示例。

摘要由CSDN通过智能技术生成

废话不多说，直接上干货！

1.mui页面引入css/js

<link href="../css/mui.css" rel="stylesheet" type="text/css" />
<link href="../css/mui.previewimage.css" rel="stylesheet" type="text/css" />
<script src="../js/mui.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>

2.给img图片加入

data-preview-src="" data-preview-group="1"

3.完整代码块，示例如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D