question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Local images are not shown

See original GitHub issue

Hi,

Local images are not being shown inside the plugin

In the .md file I’m reading, two images are present in the code:

![01](01.png)
![02](02.png)

Both images are in the same directory of readme.md file, no need to absolute path or subdirectories Both images are PNG with 1192 x 836 resolution

When the .md is exported to html, the images appear correctly

<img src="01.png" alt="01" />
<img src="02.png" alt="02" />

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:6

github_iconTop GitHub Comments

6reactions
Tontynacommented, Nov 4, 2021

The file:/// trick isn’t a good idea unless you wanna restrict yourself and your md files to MarkdownViewer++. Forget about “Export to HTML”.

2reactions
Wallbycommented, Mar 27, 2022

I think that the issue is because of…

InvalidOperationException This instance represents a relative URI, and this property is valid only for absolute URIs.

_https://docs.microsoft.com/en-us/dotnet/api/system.uri.scheme?view=net-6.0_

… and…

InvalidOperationException This instance represents a relative URI, and this property is valid only for absolute URIs.

_https://docs.microsoft.com/en-us/dotnet/api/system.uri.localpath?view=net-6.0#system-uri-localpath_

I haven’t tested the following diff, but it seems that it should address all issues I think…

In MarkdownViewerRenderer.cs

//Get some file information
string src = imageLoadEvent.Src;
Uri uri = new Uri(src);
string extension = Path.GetExtension(src);

+ if(uri.IsAbsoluteUri)
+ {
-    //Check if local file or web resource
+    //Check if local file from absolute path or web resource
    switch (uri.Scheme.ToLowerInvariant())
    {
        case "file":
            //In case of a local file -> Try to load it directly
            imageLoadEvent.Handled = true; //Tell the event it was handled, so no error border is drawn
            ThreadPool.QueueUserWorkItem(state => LoadImageFromFile(src, imageLoadEvent));
            break;
        case "http":
        case "https":
            //For web resources check extension and parameter, to fetch from e.g. "badge" creating sources
            if ((extension != null && extension.Equals(".svg", StringComparison.OrdinalIgnoreCase))
                || uri.ToString().Contains("svg="))
            {
                //In case of a web resource file -> Load async
                using (WebClient webClient = new WebClient())
                {
                    imageLoadEvent.Handled = true; //Tell the event it was handled, so no error border is drawn
                    webClient.DownloadDataCompleted += (downloadSender, downloadEvent) => { OnDownloadDataCompleted(downloadEvent, imageLoadEvent); };
                    webClient.DownloadDataAsync(uri);
                }
            }
            break;
    }
+}
+else
+{
+    //Local file from relative path -> Try to load it directly
+    imageLoadEvent.Handled = true; //Tell the event it was handled, so no error border is drawn
+    ThreadPool.QueueUserWorkItem(state => LoadImageFromFile(@"file:///" + this.FileInfo.FileDirectory + "/" + src, imageLoadEvent));
+}

… and…

/// <summary>
/// 
/// </summary>
/// <param name="src"></param>
/// <param name="imageLoadEvent"></param>
protected void LoadImageFromFile(string src, HtmlImageLoadEventArgs imageLoadEvent)
{
    try
    {
        Uri uri = new Uri(src);
        //Try to load the file as Image from file
        //Remove the scheme first
        string srcWithoutScheme = src;
        int i = srcWithoutScheme.IndexOf(':');
        if (i > 0) srcWithoutScheme = srcWithoutScheme.Substring(i + 1).TrimStart('/');
-        //If not absolute, add the current file path
-        if (!Path.IsPathRooted(srcWithoutScheme))
-        {
-            uri = new Uri(@"file:///" + this.FileInfo.FileDirectory + "/" + srcWithoutScheme);
-        }

        //For SVG images: Convert to Bitmap
        string extension = Path.GetExtension(src);
        if (extension != null && extension.Equals(".svg", StringComparison.OrdinalIgnoreCase))
        {
            ConvertSvgToBitmap(SvgDocument.Open<SvgDocument>(uri.LocalPath), imageLoadEvent);
        }
        else
        {
            //Load uri, 8, 1
            imageLoadEvent.Callback((Bitmap)Image.FromFile(uri.LocalPath, true));
        }
    }
    catch { } //Not able to handle, refer back to orginal process
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - React won't load local images
This usually means your local web server is not serving the images or the url you specified is incorrect. Open your browser console...
Read more >
Photo's app not showing local images
If your Photos app is not showing local images, it's possible that the app may not be properly configured to access the local...
Read more >
How to fix image not showing in an HTML page
How to fix image not showing in an HTML page · Check the src path to of the <img> tag · Check the...
Read more >
Error: Images Not Appearing on My Web Page
Below are some reasons why your images may not be displayed correctly on your Web page. Image files were not uploaded to the...
Read more >
Local Images are not showing after building the IPA file ...
I am facing an Local Image not loading on the Screens Issue after building the IPA file on Xcode - 12, IOS -...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found