Webview2 SetVirtualHostNameToFolderMapping 不允许加载本地资源答案

【问题标题】：Webview2 SetVirtualHostNameToFolderMapping not allowed to load local resourceWebview2 SetVirtualHostNameToFolderMapping 不允许加载本地资源
【发布时间】：2021-11-11 21:38:59
【问题描述】：

大家好，我正在将新的 WebView2 与我的 WinForms 应用程序一起使用。我可以让它显示我创建的动态 html，但是当它尝试加载页面的图像时它有“”。

图片标签如下所示：

<div id="animation1" style="display: inline-flex;">
   <img src="file:///C:\Users\admin\source\repos\wCondictions\bin\x86\Debug\Resources/nice.gif" style="height: 110px; width: 110px;">
   <span class="imgWeather">Nice</span>
</div>

我目前使用的代码是这样的：

fileNames = new DirectoryInfo(resourcePath)
            .GetFiles()
            .OrderBy(p => Path.GetFileNameWithoutExtension(p.Name))
            .Select(fi => fi.Name)
            .ToArray();
string blah = Path.Combine(Application.StartupPath, "Resources");
string fullHtml = string.Empty;
string HeaderHtml = "<!DOCTYPE html>\n" +
                        "<html>\n" +
                        "<style>\n" +
                            ".imgW {\n" +
                                "position: absolute;\n" +
                                "z-index: 10;\n" +
                                "color: red;\n" +
                                "width: 110px;\n" +
                                "height:30px;\n" +
                                "text-align: center;\n" +
                                "vertical-align: middle;\n" +
                                "top: 88px;\n" +
                                "background-color: aquamarine;\n" +
                                "font-family: Arial;\n" +
                                "font-size: small;\n" +
                            "}\n" +
                        "</style>\n" +
                        "<body style=\"background-color: #00000;\">";
string dynamixImg = "<div id=\"animation1\" style=\"display: inline-flex;\">\n" +
                                "<img src=\"file:///" + blah + "/{0}\" style=\"height: 110px; width: 110px;\" />\n" +
                                "<span class=\"imgW\">{1}</span>\n" +
                            "</div>";
string FooterHtml = "</body>" +
                        "</html>";

for (int a = 0; a < fileNames.Count(); a++)
{
    fullHtml += string.Format(
                dynamixImg, 
                fileNames[a], 
                fileNames[a]
                .Replace(".gif", "")
                .Replace("&", "&&") 
    ) + "\n";
}

await webView21.EnsureCoreWebView2Async();

webView21.CoreWebView2.SetVirtualHostNameToFolderMapping(
            "Resources", 
            @"C:\Users\admin\source\repos\wCondictions\bin\x86\Debug\Resources\", 
            CoreWebView2HostResourceAccessKind.Allow
);

webView21.NavigateToString(HeaderHtml + fullHtml + FooterHtml);

我见过很多地方说要使用 SetVirtualHostNameToFolderMapping，但即便如此，它仍然会出现同样的错误。

所以我不确定我缺少什么或误解了如何使用 SetVirtualHostNameToFolderMapping 以允许图像在本地加载？

【问题讨论】：

使用SetVirtualHostNameToFolderMapping 后，您应该将链接更改为相对链接。你做到了吗？
@PoulBak 该链接仅显示没有图像的常规 HTML。如果我没有图像，那么我的 HTML 也可以工作。
@PoulBak 你能更好地解释你的第一条评论吗？

标签： c# winforms webview2

【解决方案1】：

好的，我会再试一次，我的第一个答案令人困惑。

您收到错误是因为您使用了file:// 协议。

看来你还没有完全理解SetVirtualHostNameToFolderMapping的用法。

通过调用SetVirtualHostNameToFolderMapping 设置虚拟服务器后，您应该像使用互联网上的任何其他服务器一样使用该虚拟服务器。不要使用file://！

所以您所要做的就是编辑您的HeaderHtml 和您的<img src。

HeaderHtml 应该包含一个<base> 标记，它应该指向您的虚拟服务器根目录：

<html>
    <head>
        <base href="http://Resources" />
    </head>

这使得构建动态<ìmg> 标记变得非常容易，来源只是文件名：

<img src="image.png" />

现在WebView2会将其转换为文件路径并获取图像！

作为旁注，您还可以通过在文件名前面添加文件夹名称来包含子文件夹中的文件，如下所示：

<img src="/subfolder/image.png" />

【讨论】：