AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【React工作记录九十一】Viewer.js实现图片预览效果

2023-08-07 252
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【React工作记录九十一】Viewer.js实现图片预览效果

前言

大家好 我是歌谣 今天要说的是一个需求图片可以实现一个预览的结果最近涉及一个移动端项目需要把其中的图片变成可预览的图片 听学弟说 可以利用viewer进行实现首先我们需要做的就是先写一个简单demo 先实现其中的效果 2021年的事情了


实现效果


image.png

基本案例

```




Document rel="stylesheet" href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" crossorigin="anonymous"> rel="stylesheet" href="./css/viewer.css">






```


项目实现部分

看一下效果预览点击的时候就可以进行一个效果的预览操作了 同样 三步走第一步引入第二步注意结构第三步效果演示


代码部分

```

文章标签：
前端开发
关键词：
React Native js
react JavaScript
前端歌谣
目录
相关文章
夏天49597
|
17天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架，由 Vercel 开发。本文从基础概念出发，逐步探讨 Next.js 的常见问题、易错点及解决方法，并通过具体代码示例进行说明，帮助开发者快速构建高性能的 Web 应用。
夏天49597
46 10
技术混子
|
16天前
|
资源调度 前端开发 数据可视化
构建高效的数据可视化仪表板：D3.js与React的融合之道
【10月更文挑战第25天】在数据驱动的时代，将复杂的数据集转换为直观、互动式的可视化表示已成为一项至关重要的技能。本文深入探讨了如何结合D3.js的强大可视化功能和React框架的响应式特性来构建高效、动态的数据可视化仪表板。文章首先介绍了D3.js和React的基础知识，然后通过一个实际的项目案例，详细阐述了如何将两者结合使用，并提供了实用的代码示例。无论你是数据科学家、前端开发者还是可视化爱好者，这篇文章都将为你提供宝贵的洞见和实用技能。
技术混子
35 5
源码星辰
|
1月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域，选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular，探讨它们各自的特点、开发场景、优缺点，并提供选择框架的建议。
源码星辰
40 6
明月何时照我还呀
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么？
React 和 Vue.js 框架的区别是什么？
明月何时照我还呀
41 11
源码星辰
|
2月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库，它提供组件化结构、数据绑定、路由管理和状态管理等功能，帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular，能够提高开发效率并促进团队协作。
源码星辰
94 4
游客zi3qmblbcdexu
|
3月前
|
JSON 前端开发 JavaScript
13.JS学习篇-ES6 React 项目模板
【8月更文挑战第25天】
游客zi3qmblbcdexu
44 2
13.JS学习篇-ES6 React 项目模板
极简博客
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成：React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成，以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧，展示了如何利用Express.js处理路由和静态文件服务，同时在React、Vue和Angular中构建用户界面，帮助开发者快速掌握前后端分离的开发方法，实现高效、灵活的Web应用构建。
极简博客
51 3
请看我回答~
|
3月前
|
前端开发 JavaScript API
构建高效Web应用：React与Node.js的完美结合
【8月更文挑战第29天】在当今快速变化的软件开发领域，构建高性能、可扩展的Web应用成为开发者的首要任务。本文将深入探讨如何利用React和Node.js这两大技术栈，打造一个高效且响应迅速的现代Web应用。从前端的用户界面设计到后端的服务逻辑处理，我们将一步步分析这两种技术如何协同工作，提升应用性能，并确保用户体验的流畅性。通过实际代码示例和架构设计的解析，本篇文章旨在为读者提供一套清晰的指南，帮助他们在项目开发中做出更明智的技术选择。
请看我回答~
128 6
土木林森
|
3月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘？带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中，高效与可维护性至关重要。JavaServer Faces（JSF）框架通过其面向组件的开发模式，提供了构建复杂用户界面的强大工具，特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观，可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件，并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap，可以进一步丰富组件库，提升用户体验。
土木林森
55 0
土木林森
|
3月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅：从styled-components到emotion，全面解析样式管理新趋势的实战应用与优势剖析！
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式，近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript，实现了样式与逻辑的高度耦合，提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例，探讨 CSS-in-JS 在 React 开发中的应用，并分享实践心得。首先介绍了 CSS-in-JS 的基本概念，然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
土木林森
146 0

热门文章

最新文章

  • 1
    照着官方文档学习react
  • 2
    react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist
  • 3
    React Native-组件的引用
  • 4
    【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
  • 5
    react学习系列4 组件生命周期
  • 6
    React中的Virtual DOM(看这一篇就够了)
  • 7
    React Native填坑之旅 -- 回归小插曲
  • 8
    React Native 运行报错 error in opening zip file
  • 9
    Vue与React编程式路由导航
  • 10
    前端学习案例-react18+ts+redux实战1-rudux-tookit
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    260
  • 3
    js【详解】arr.reduce() 数组缩减
    45
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    98
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    408
  • 6
    JavaScript进阶-JavaScript库与框架简介
    57
  • 7
    DVWA JavaScript 通关解析
    66
  • 8
    WEB三大主流框架之Vue.js
    44
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    215

    • 相关课程

    更多
  • JavaScript入门与实战
  • React 入门与实战
  • React 入门教程开发文档
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问