Bootstrap Blazor Viewer 图片浏览器 组件更新
支持流转图片(ImageFromStream), 用于本地项目例如 MAUI Blazor,Blazor hybrid
示例:
https://blazor.app1.es/viewer
使用方法:
1.nuget包
BootstrapBlazor.Viewer
2._Imports.razor 文件 或者页面添加 添加组件库引用
@using BootstrapBlazor.Components
3.razor页面
Demo
<Viewerjs />
多图片
<Viewerjs Images='new List<string>() { "photo-2.jpg","photo-1.jpg","photo-3.jpg"}' />
单图片
<Viewerjs Src="@_srcPhoto" Width="600px" Height="300px" />
单图片+简化工具条
<Viewerjs Src="@_srcPhoto" Width="600px" Height="300px" toolbarlite="true" />
多图片+简化工具条
<Viewerjs Images='new List<string>() { "photo-2.jpg","photo-1.jpg","photo-3.jpg"}' toolbarlite="true" />
单图片流
<Viewer SrcStream="imagesStreamList[1]" />
多图片流
<Viewer ImagesStream="imagesStreamList" />
本地单图片,组件流读取
<Viewer Src='@(@"F:\images\objects.jpg")' LocalFileToStream />
4.参数说明
类型 | 参数 | 说明 | 默认值 | 备注 |
bool | UseBuiltinImageDiv | 使用内置图片DIV | true | |
List<string> | Images | 图片列表DIV | ||
string | Src | 单图片 | ||
List<string> | Alts | 图片名称列表 | ||
bool | toolbarlite | 简化版工具条 | false | |
string | Height | 高 | 400px | |
string | Width | 宽 | 400px | |
string | ID | 组件ID | ||
List<Stream> | ImagesStream | 图片流列表 | ||
Stream | SrcStream | 单图片流 | ||
bool | LocalFileToStream | 使用流读取本地图片 | false |
更新历史
v7.0.2
- 支持流转图片(ImageFromStream), 用于本地项目例如 MAUI Blazor,Blazor hybrid,因为chorome不支持file:///xx 方式显示本地图片
- 添加 ImagesStream : 图片流列表
- SrcStream : 单图片流
- LocalFileToStream : 使用流读取本地图片
关联项目
FreeSql
BA & Blazor
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 。
转载声明
本文来自博客园，作者：周创琳 AlexChow，转载请注明原文链接：
https://www.cnblogs.com/densen2014/p/17069539.html
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
