Blazor Server中NavigateTo跳转后图片弹窗无法显示问题

核心问题分析 #

问题根源在于图片路径的上下文解析差异：<NavLink>跳转时Blazor会自动维护正确的base href上下文，但通过_navigationManager.NavigateTo跳转后，JS代码里的相对图片路径没有基于应用根路径解析，导致新窗口加载的图片地址无效。

具体解决方法 #

1. 用绝对路径加载图片 #

通过Blazor的NavigationManager.BaseUri获取应用根路径，传给JS方法拼接成绝对图片地址，避免相对路径解析错误：

• Blazor组件中调用JS时传入根路径：

await _jsRuntime.InvokeVoidAsync("newImageWindow", imageRelativePath, _navigationManager.BaseUri);

• 修改JS代码生成绝对URL：

function newImageWindow(imagePath, baseUri) {
    const absoluteImageUrl = new URL(imagePath, baseUri).href;
    const newWindow = window.open('', '_blank');
    newWindow.document.write(`<img src="${absoluteImageUrl}" style="max-width:90%;max-height:90%;"/>`);
    newWindow.document.close();
}

2. 对NavigateTo的路由参数编码 #

如果sub参数包含特殊字符，会导致路由解析异常，先对参数做URL编码：

var encodedSub = Uri.EscapeDataString(sub);
_navigationManager.NavigateTo($"/DisplayTemplateRazor/{encodedSub}");

3. 给新窗口设置一致的base href #

在JS写入新窗口内容时，手动添加base标签，确保路径解析和主窗口一致：

function newImageWindow(imagePath) {
    const newWindow = window.open('', '_blank');
    newWindow.document.write(`
        <base href="${document.baseURI}">
        <img src="${imagePath}" style="max-width:90%;max-height:90%;"/>
    `);
    newWindow.document.close();
}

4. 验证图片地址有效性 #

在Blazor组件中输出图片的绝对路径，复制到浏览器地址栏测试是否能正常加载：

var absoluteImageUrl = _navigationManager.ToAbsoluteUri(imageRelativePath).ToString();
Console.WriteLine(absoluteImageUrl);

如果地址无法访问，排查图片文件的部署路径或权限问题。

内容的提问来源于stack exchange，提问作者Panos Nostrarmagos