BootstrapBlazor.Viewer 7.0.2

.NET 6.0
dotnet add package BootstrapBlazor.Viewer --version 7.0.2
NuGet\Install-Package BootstrapBlazor.Viewer -Version 7.0.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BootstrapBlazor.Viewer" Version="7.0.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BootstrapBlazor.Viewer --version 7.0.2
#r "nuget: BootstrapBlazor.Viewer, 7.0.2"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install BootstrapBlazor.Viewer as a Cake Addin
#addin nuget:?package=BootstrapBlazor.Viewer&version=7.0.2

// Install BootstrapBlazor.Viewer as a Cake Tool
#tool nuget:?package=BootstrapBlazor.Viewer&version=7.0.2

Blazor Viewer 图片浏览器 组件

封装Viewer.js库

示例:

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

Blazor 组件

条码扫描 ZXingBlazor nuget stats

图片浏览器 Viewer

条码扫描 BarcodeScanner

手写签名 Handwritten

手写签名 SignaturePad

定位/持续定位 Geolocation

屏幕键盘 OnScreenKeyboard

百度地图 BaiduMap

谷歌地图 GoogleMap

蓝牙和打印 Bluetooth

PDF阅读器 PdfReader

文件系统访问 FileSystem

光学字符识别 OCR

电池信息/网络信息 WebAPI

视频播放器 VideoPlayer

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub

Product Versions
.NET net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows net7.0 net7.0-android net7.0-ios net7.0-maccatalyst net7.0-macos net7.0-tvos net7.0-windows
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (2)

Showing the top 2 NuGet packages that depend on BootstrapBlazor.Viewer:

Package Downloads
BlazorShared

BlazorMaui , 整合Blazor,BootstrapBlazor UI组件库,Maui的共享跨平台工程示例共享库

BootstrapBlazor.Densen.All

Blazor 组件懒人包

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
7.0.2 93 1/27/2023
7.0.1 347 12/7/2022
7.0.0 436 11/9/2022
6.2.1 292 10/12/2022
6.2.0 174 10/12/2022