使用saltui实现图片预览查看
项目是基于dingyou-dingtalk-mobile脚手架的一个微应用,这个脚手架使用的UI是antd-mobile,它提供了一个图片上传的组件,但是未提供图片预览的组件,在网上找了不少如何在react项目中实现图片预览查看的功能,大多数都是基于react-native的,比如https://segmentfault.com/a/1190000010090233里面所说的react-wx-images-viewer组件,以及https://www.jianshu.com/p/6374a1ec3f01里介绍的react-native-photo-browser组件,但是这个脚手架未引用到react-native,试着在该脚手架上安装react-native,进而使用这些组件,但是都报错了,无法实现。
看了下钉钉官方推荐的saltui,里面提供了图片预览的的功能,可参看https://salt-ui.github.io/components/image-viewer,立即按照其说明进行了安装。
打开nowaGui对于项目下的终端,输入以下命令行即可安装。
npm install saltui --save
接下来是在页面上的引用。加入以下两句即可。(当时在引用的时候少加了dd.css,导致一直没有使用成功,以为在这个脚手架中只能使用一种ui呢。)
import { ImageViewer,Boxs } from 'saltui';
import 'saltui/build/dd.css';
接下来即是获取图片数据、填充进组件里即可了
show =(index)=>{ ImageViewer.show({
photos: this.listForImageLook(this.state.imagesList),
current: index,
}); }
const listForImage = (imagesList) => {
let images = [];
for(let i = 0; i < imagesList.length; i++) { let m = {url : AUTH_URL + 'appImages/' + imagesList[i].imageName,id : imagesList[i].id}; images.push(
<Box>
<img src={AUTH_URL + 'appImages/' + imagesList[i].imageName} className="demo3-t-list-img"
onClick={this.show.bind(this,i)}/>
</Box> );
} return images;
}
<div style={{display: this.state.imagesList.length == 0 ? 'none' : ''}}>
<WhiteSpace size="lg" /> <Card>
<Card.Header
title={<span><font color="gray"> * </font>图片</span>}
/>
<Card.Body style={{width : '90%'}}>
<HBox vAlign="center">
<HBox flex={1}>
{listForImage(this.state.imagesList)}
</HBox>
</HBox>
</Card.Body> </Card>
</div>
使用saltui实现图片预览查看的更多相关文章
- jQuery PC端图片预览,鼠标移上去查看大图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- 本地与在线图片转Base64及图片预览
查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...
- 图片预览组件PhotoView
图片预览组件PhotoView PhotoView是一款图片预览组件,广泛应用于大图的查看.该组件支持图片手势缩放.旋转等功能.它可以很好的和ViewPager.Picasso等组件结合,实现各种复杂 ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...
- 手动实现图片预览-放大缩小全屏支持IE9以上
#{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
随机推荐
- Caused by: org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'zoneId' in 'class java.lang.String'
本文为博主原创,未经允许不得而转载: 异常展示: dao层定义的接口为: public int getClientTotal(); 在mybatis中的sql为: <select id=&quo ...
- DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层 ...
- 并发编程之IO模型
一.阻塞IO(blocking IO) from concurrent.futures import ThreadPoolExecutor import socket server = socket. ...
- 五、IO编程
input/output:输入.输出 Stream(流):Input Stream就是数据从外面(磁盘.网络)流进内存,Output Stream就是数据从内存流到外面去.(流:相当于管道) 由于CP ...
- 关于在mac安装安卓的模拟器的一些些那点事情~~~
ook~~自己捣鼓了三天终于安装成功了~妹的~踩了太多的坑~整个人就不好了~ 为了节省大家的时间~所以今天我就将我安装的过程整体思路教给大家!有了思路安装起来就很好了!!!但是 注意的是,也许你会出现 ...
- Codeforces 242 E. XOR on Segment
题目链接:http://codeforces.com/problemset/problem/242/E 线段树要求支持区间求和,区间内每一个数字异或上一个值. 既然是异或,考虑每一个节点维护一个长度为 ...
- Java+selenium 爬Boss直聘中职位信息,薪资水平和职位描述
需要下载合适的selenium webdirver jar包和对应浏览器的驱动jar包 import org.openqa.selenium.By; import org.openqa.selen ...
- JDBC Connection Configuration
如果在Jmeter 中想用到连接数据库的功能,必须下载jar包,常见的关系型数据库jar包见以下共享链接 链接:https://pan.baidu.com/s/1t-k9RW141lw0j_QSw53 ...
- Qt532.容器QMap&QMultiMap
PS: QMap 一个Key 只能对应 一个Value (不是绝对的情况...内部都有 一个key对应多个value的机制) PS: QMultiMap 一个Key 可以对应 多个Value PS: ...
- ECharts图表的小工具
本文介绍一个echarts工具类EChart.js,用来制作统计图表,基于echarts3. 一.工具类特性如下: 包含柱状图.折线图和饼图,可以实现这三类统计图之间的切换: 支持标题和副标题: 支持 ...