0

I'm trying to display images in my WPF application.

I'm getting a path for each image, and then creating an html website with which to display the image.

        StringBuilder sb = new StringBuilder();
        sb.Append("<html><body><img width='100%' height='100%' src='");
        sb.Append(path);
        sb.Append("'/></body></html>");
        code = sb.ToString();
        return code;

Is the code I use to generate the HTML returns valid HTML code - I have verified this by opening the code with my browser, which displays the image the way I want it to. I'm calling this code from a method called getHtmlForImage(imagePath) and then loading it into the browser:

string myHtml = getHtmlForImage(imagePath)
string fakeUrl = "http://interceptMe/"
browser.RegisterResourceHandler(fakeUrl, newMemoryStream(Encoding.UTF8.getBytes(myHtml)));
browser.Load(fakeUrl);

The path of a file looks like this:

"C:\\ProgramData\\ApplicationFolder\\Resources\\IMG1_05.JPG"

and the final HTML code looks like this:

<html><body><img width='100%' height='100%' src='C:\\ProgramData\\ApplicationFolder\\Resources\\IMG1_05.JPG'/></body></html>

Which doesn't display the image. This code works when pasted into a .html and opened with a standard browser. I have verified that the code is being intercepted by adding text to it - which is then properly displayed. Replacing the path given to getHtmlForImage() with an image on the web displays the image as wanted, however not local images. Changing the RegisterResourceHandlerto:

browser.RegisterResourceHandler(fakeUrl, new MemoryStream(Encoding.UTF8.GetBytes(myHtml)), ResourceHandler.GetMimeType(".jpg"));

Displays the previously shown White box on black background - both for local images, as well as web-based images.

The reason for the multiple variables like codeand myHtmlis debugging.


Here's how to reproduce the bug in a new project:

Step 1: Make a new WPF project, import CefSharp and enbale AnyCpu support like in Github Issue 1714 - variant 1

Step 2: Add a Chromium Web Browser, and a button in MainWindow.xaml, like this:

<wpf:ChromiumWebBrowser x:Name="browser" Address="www.google.com" Grid.Column="0"></wpf:ChromiumWebBrowser>
    <Button Content="BreakTheBrowser!" Grid.Column="1" Click="Button_Click"></Button>

Step 3: Initalize the browser in MainWindow.xaml.cs with the following code:

        public MainWindow() {
        var settings = new CefSettings();
        settings.BrowserSubprocessPath = @"x86\CefSharp.BrowserSubprocess.exe";  
        Cef.Initialize(settings, performDependencyCheck: false, browserProcessHandler: null);
        InitializeComponent();
    }

Step 4: Create a method called getHtmlForImage(string path) like this:

private String getHtmlForImage(string path) {
        string code;
        StringBuilder sb = new StringBuilder();
        sb.Append("<html><body><img width='100%' height='100%' src='");
        sb.Append(path);
        sb.Append("'/></body></html>");
        code = sb.ToString();
        return code;
    }

Step 5: Add a button_click event to the button, and in that click-event load the image:

private void Button_Click(object sender, RoutedEventArgs e) {
        string path = "https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg";
        string myHtml = getHtmlForImage(path);
        string fakeUrl = "http://interceptMe/";
        browser.RegisterResourceHandler(fakeUrl, new MemoryStream(Encoding.UTF8.GetBytes(myHtml)), ResourceHandler.GetMimeType(".jpg"));
        browser.Load(fakeUrl);
    }

Step 6: Start the application, and click the button. The notorious white box, on black background, should appear.


Additional information:

  • Cefsharp Version: 65.0.0, installed with NuGet yesterday
  • Windows 10, 64 bit
  • Using Visual Studio Enterprise 2017, Version 15.7.5
  • .NET Framework Version 4.7.03.056
ASDASDASD
  • 16
  • 3
  • Start by reading https://github.com/cefsharp/CefSharp/wiki/General-Usage#request-handling there is a lot there, please read from the beginning to https://github.com/cefsharp/CefSharp/wiki/General-Usage#file-uri-file – amaitland Aug 10 '18 at 00:05
  • The system I am working with doesn't allow write permissions to my application. The user can copy the images into a folder, where the application will then pick them up and display them. In the wiki the `CefSharpSchemeHandlerFactory` is refering to specific `.html` files, I only have access to image files. I tried using `var base64EncodedHtml = Convert.ToBase64String(Encoding.UTF8.GetBytes(myHtml));` followed by `contentBrowser.Load("data:text/html;base64," + base64EncodedHtml);` which doesn't work, it gives the same placeholder as a result – ASDASDASD Aug 10 '18 at 07:55
  • https://github.com/cefsharp/CefSharp/blob/1502a06eb6374bbd7f639c973c141b42f81b990c/CefSharp.Wpf.Example/Views/BrowserTabView.xaml.cs#L101 http://cefsharp.github.io/api/63.0.0/html/M_CefSharp_WebBrowserExtensions_RegisterResourceHandler.htm https://github.com/cefsharp/CefSharp/wiki/General-Usage#request-interception – amaitland Aug 10 '18 at 08:49
  • Thank you very much! I've implemented the `browser.RegisterResourceHandler()` method, and it intercepts the URL perfectly fine. It does however have issues loading the image - while web-based links work without issues local files aren't loaded. I've disabled web security of the browser (bad idea, I know, but the only way around) which got rid of the _"Could not acces local source"_ error I got, the image is however just not displaying. Adding `ResourceHandler.GetMimeType(".jpg")` yielded some very unexpected results: https://imgur.com/a/4yLKM7t – ASDASDASD Aug 10 '18 at 09:17
  • Please edit your original post and include code to that reproduces your problem. – amaitland Aug 10 '18 at 10:07
  • I've edited the post! I hope that helps! – ASDASDASD Aug 10 '18 at 10:36
  • Not really, looks incomplete. – amaitland Aug 10 '18 at 10:42
  • Oh, I'm sorry for that! I've added additional information as well as a step-by-step guide on how to reproduce it from scratch! Please tell me if you need anything else, I'll add it – ASDASDASD Aug 10 '18 at 10:59
  • Where are you registering the image as a resource? Don't use the file path for the image. Register it as a resource with a unique url, use that url as part of your generated html. – amaitland Aug 10 '18 at 11:16
  • Make sure you specify the correct mime type for your html, looks incorrect at the moment – amaitland Aug 10 '18 at 11:17
  • You're definitely the expert here, so please correct me if I'm wrong, however I'm curious as to why a standalone browser can deal with this? Frankly I've never encountered this issue before, when all my `.html` files were just opened in a browser. Does CefSharp handle it in a different way compared to a standalone browser like Chrome? – ASDASDASD Aug 10 '18 at 11:48
  • What happens when you open a html file saved on disk in CefSharp? It should behave exactly the same as Chrome. – amaitland Aug 10 '18 at 12:29
  • It does, which is the reason why I was confused - opening the file did work, however reading it from memory didn't. Adding a uri for the image worked tho! If you post it down below as an aswear I can hit accept on it! Thank you very, very much! – ASDASDASD Aug 10 '18 at 12:32
  • Security restrictions, you cannot by default access the file system from schemes other than the file scheme. – amaitland Aug 10 '18 at 13:02

0 Answers0