示例:
使用方法:
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 : 使用流读取本地图片
