CODEWITHSUNDEEP
c#winformswebview2
StealthRT
StealthRT

Reputation: 10552

Webview2 SetVirtualHostNameToFolderMapping not allowed to load local resource

Hey all I am using the new WebView2 with my WinForms app. I can get it to display my dynamic html that I create but it has the "" when it tries to load the images for the page.

enter image description here

The image tag looks like this:

<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>

The code I am currently using is this:

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);

I've seen many places where it says to use the SetVirtualHostNameToFolderMapping but even with that it still says the same error.

So I am not sure what I am missing or misunderstanding about how to use the SetVirtualHostNameToFolderMapping in order to allow the images to load locally?

Upvotes: 3

Views: 3100

Answers (2)

MMB Coder
MMB Coder

Reputation: 66

To follow up on this, and to give a clear example, this is what you need to do. This works with the current WebView2 control as of 2023 (which is version 1.0.1671-prerelease). You may need to adjust syntax on different versions.

This code sets up the folder mapping:

string resourcePath = @"C:\Users\{username}\{sourcepath}\Resources\";
WebView2.CoreWebView2.SetVirtualHostNameToFolderMapping("MyFiles", resourcePath, CoreWebView2HostResourceAccessKind.Allow);

Then instead of referencing a local path like

<img src="file:///C:\images\image.png">

in your HTML string, you now reference

<img src="http://MyFiles/image.png">

then finally call

WebView2.CoreWebView2.NavigateToString(myhtml);

and your local image will display correctly in the page.

This also will work for an end-user if you publish the app as a ClickOnce application.

Upvotes: 5

Poul Bak
Poul Bak

Reputation: 10930

Ok, I will try again, my first answer was confusing.

You get the error because you use the file:// protocol.

It seems you have not fully understood the the use of SetVirtualHostNameToFolderMapping.

Once you have set the virtual server by calling SetVirtualHostNameToFolderMapping you should use that virtual server just as you use any other server on the internet. Do NOT use file://!

So all you have to do is edit your HeaderHtml and your <img src.

The HeaderHtml should include a <base> tag, which should point to your virtual server root:

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

That makes it very easy to build you dynamic <ìmg> tags, the source is simply the file name:

<img src="image.png" />

Now WebView2will translate it into a file path and fetch the image!

As a side note, you can also include files from sub-folder by adding the folder name in front of the file name, like this:

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

Upvotes: 1

Related Questions