效果图

环境

.NET 6

代码

_Layout.cshtml

<!--github仓库地址: https://github.com/fengyuanchen/viewerjs-->
 <script src="https://cdn.jsdelivr.net/npm/viewerjs@1.10.4/dist/viewer.min.js"></script>
 
 <!--自己的js代码-->
 <script src="js/Init.js"></script>

Init.js

// Blaozr调用这个方法
function InitImg() {
    console.log("执行 InitImg");

    //修改图片宽高和居中
    let imgList = document.querySelectorAll("img");

    let attrName = "img-init";

    console.log("图片数量:" + imgList.length);

    for (let item of imgList) {

        if (item.getAttribute(attrName) == "true") {
            // console.log("img标签已经初始化,跳过")
            continue;
        }
        item.style.width = "200px";
        item.style.height = "100px";
        item.parentElement.style.textAlign = "center";

        // 处理过后,添加属性,下次直接跳过
        item.setAttribute(attrName, "true")
    }

    // 初始化 Viewer
    InitViewer()

}

let viewerArr = [];

function InitViewer() {
    // 获取所有 name="imgBox" 的dom
    let domList = document.getElementsByName('imgBox')

    let attrName = "viewer-init";

    for (let item of domList) {
        
        // 获取dom标签的属性
        if (item.getAttribute(attrName) == "true") {
            // console.log("imgBox标签已经初始化,跳过")
            continue;
        }

        // 初始化 Viewer
        viewerArr.push(new Viewer(item));

        // 处理过后,添加属性,下次直接跳过
        item.setAttribute(attrName, "true")
    }
}

// 销毁所有 Viewer 对象  (Blaozr暂时没发现destroy的应用场景，在React这种框架中会用到destroy)
function DestoryViewer() {
    if (viewerArr.length != null) {
        // console.log(viewerArr);
        for (let item of viewerArr) {
            item.destroy()
        }
    }
}

Content.razor

<div name="imgBox">   
    <!--自己的各种内容-->   
</div>

Content.razor.cs

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	// 调用js中的方法                
    await _jsRuntime.InvokeVoidAsync("InitImg");
}

Github

https://github.com/xxxxue/BlazorJiangBlog