项目是基于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实现图片预览查看的更多相关文章

  1. jQuery PC端图片预览,鼠标移上去查看大图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...

  3. 本地与在线图片转Base64及图片预览

    查看效果:http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64(从而可以预览图片): function localImgLoad() { var src ...

  4. 图片预览组件PhotoView

    图片预览组件PhotoView PhotoView是一款图片预览组件,广泛应用于大图的查看.该组件支持图片手势缩放.旋转等功能.它可以很好的和ViewPager.Picasso等组件结合,实现各种复杂 ...

  5. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  6. DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

    DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库. 它是轻量级的,不依赖任何其他类库(如JQuery)并且高度可定制. 试试看! 将文件拖至此处或点击上传.(这仅仅是 dropzo ...

  7. 手动实现图片预览-放大缩小全屏支持IE9以上

    #{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...

  8. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  9. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

随机推荐

  1. website for .Net Core

    5 Ways to Build Routing in ASP.NET Core Bundling in .NET Core MVC Applications with BundlerMinifier. ...

  2. JavaScript(2)

    JavScript在页面上显示时间,首先我们先来了解关于时间的一些简单方法: getFullYear()  获取当前年份,getMonth() 0-n(一月到十二月),getDate() 1-31(月 ...

  3. Latex 左右引号

    参考: LaTeX技巧218:LaTeX如何正确输入引号:双引号""单引号'' Latex 左右引号 在latex中加引号时,使用""的输出为两个同向的引号: ...

  4. 17秋 SDN课程 第三次上机作业

    SDN 第三次上机作业 1.创建拓扑 2.利用OVS命令下发流表,实现vlan功能 3.利用OVS命令查看流表 s1: s2: 4.验证性测试 5.Wireshark 抓包验证

  5. 3、Python函数详解(0601)

    回顾: re search,findall,finditer.sub,subn function ()    调用函数 def func_name(arg1,....)   生成函数对象 func_s ...

  6. 由设置body线性背景色引发的问题-----当声明文档类型时,对body设置线性背景色,页面背景色无法整体线性过渡

    问题:当声明文档类型时,对body设置线性背景色,页面背景色无法整体线性过渡 不声明文档类型时,对body设置线性背景色 <HTML> <head> <meta char ...

  7. curl java 模拟http请求

    curl java 模拟http请求 直接上代码: public static void main(String args[]) throws Exception { String url = &qu ...

  8. Centos7下安装memcached

    1. which memcached //如果已经安装,会有“/usr/bin/memcached”类似的输出 memcached -h //memcache帮助列表 php -m | grep me ...

  9. python中那些双下划线开头得函数和变量

    Python中下划线---完全解读     Python 用下划线作为变量前缀和后缀指定特殊变量 _xxx 不能用’from module import *’导入 __xxx__ 系统定义名字 __x ...

  10. java转义字符处理——“\\”替换为“/”

    replaceAll("\\\\", "/"); 例如 //获取项目路径,并将\转换为/ File directory = new File("&qu ...