Local images are not shown

[prtomasi]

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

[cstichlberger]

use ![01](file:///01.png)

See the issues #30 and #23

[Tontyna]

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

[iisti]

I started using Visual Studio Code + markdownlint extension, because of this limitation.

[Wallby]

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
}

[andrzejQ]

In my opinion NppMarkdownPanel is much better then MarkdownViewer++ (even javascript can be used). My comment on Github: (A Notepad++ Plugin to view a Markdown) - goto NppMarkdownPanel -> https://github.com/andrzejQ/NppMarkdownPanel

[Wallby]

@andrzejQ for viewing markdown, there doesn't seem to be any major difference between MarkdownViewerPlusPlus and https://github.com/mohzy83/NppMarkdownPanel. Though NppMarkdownPanel doesn't have the issue that images don't load.

[asmwarrior]

Hi, I can confirm that if I use a local image with relative path, such as:

![](image/aaa.png)

I see that the NppMarkdownPanel plugin shows the image correctly, but MarkdownViewerPlusPlus failed to show the image.

Any idea to fix this issue in this plugin? Thanks.

[bhu1st]

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

I tested it. It doesn't work. Because:

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

string src = imageLoadEvent.Src;
Uri uri = new Uri(src);
if(uri.IsAbsoluteUri) { }
else {}

@Wallby the else block is never reached. It's throwing System.UriFormatException: 'Invalid URI: The format of the URI could not be determined.' when trying to create Uri instance from the relative image path.

[bhu1st]

@Wallby I added a function to check if the src is absolute before trying to instantiate the Uri in the OnImageLoad function and your code works. Here's a screenshot:

[bhu1st]

I've pushed the fix here: https://github.com/bhu1st/NppMarkdownViewer/tree/0.8.3

[asmwarrior]

I've pushed the fix here: https://github.com/bhu1st/NppMarkdownViewer/tree/0.8.3

Nice work, where can I find the binary release of 0.8.3, so that I download it and test it. Thanks.

[bhu1st]

Hi, @Wallby, @nea Can you please guide me on how can I create a binary release for the recent fixes?

I currently have a Debug configuration setting for the build.

But, even if the configuration is set to Debug, the build process creates a Release zip file under Releases folder:

Is it the release we can publish for testing? Or do I need to change the configurations to Release & build the solution?

[bhu1st]

Nice work, where can I find the binary release of 0.8.3, so that I download it and test it. Thanks.

Thanks @asmwarrior! Please ping me via email (you can find my email on my Github profile), I will send you a zip for testing until I figure out how to publish it properly on the Github repo.

[asmwarrior]

Nice work, where can I find the binary release of 0.8.3, so that I download it and test it. Thanks.

Thanks @asmwarrior! Please ping me via email (you can find my email on my Github profile), I will send you a zip for testing until I figure out how to publish it properly on the Github repo.

I just send an email to you.

I think you can upload the binary packages in this issue thread discussion as attachment. So other people can test it too. Thanks.

[asmwarrior]

Hi, @bhu1st , My sent email can not be delivered, because it said it can't find your email address domain.

[bhu1st]

@asmwarrior fixed the email address on my profile. Thanks for getting back to me, there was a typo. Please check again.

[asmwarrior]

@asmwarrior fixed the email address on my profile. Thanks for getting back to me, there was a typo. Please check again.

I send you the email again.

[bhu1st]

I think you can upload the binary packages in this issue thread discussion as attachment. So other people can test it too. Thanks.

Hi @asmwarrior plz check this build : MarkdownViewerPlusPlus-0.8.3-x86.zip

Please test it and write back if it works for you.

[asmwarrior]

I think you can upload the binary packages in this issue thread discussion as attachment. So other people can test it too. Thanks.

Hi @asmwarrior plz check this build : MarkdownViewerPlusPlus-0.8.3-x86.zip

Please test it and write back if it works for you.

I can't load this plugin. See the image shot below:

Here is the debug information of the notepad++

Notepad++ v8.6.2   (64-bit)
Build time : Jan 14 2024 - 02:16:00
Path : C:\Program Files\Notepad++\notepad++.exe
Command Line : 
Admin mode : ON
Local Conf mode : OFF
Cloud Config : OFF
OS Name : Windows 10 Pro (64-bit)
OS Version : 22H2
OS Build : 19045.3693
Current ANSI codepage : 936
Plugins : 
    HexEditor (0.9.12)
    mimeTools (3)
    NppConverter (4.5)
    NppExport (0.4)
    NppMarkdownPanel (0.7.3)

[bhu1st]

I can't load this plugin. See the image shot below:

Hi @asmwarrior, I tested the above build on Windows 10 (64-bit), Notepad++ v8.6.8 - x86

I will try if I can build it for Notepad++ (64-bit).

[asmwarrior]

Yes, x86 is for 32bit application, and x64 is for 64bit application/dlls.

[bhu1st]

I've x86 Microsoft Windows SDK C:\Program Files (x86)\Microsoft SDKs\Windows\v10.0A\bin\NETFX 4.6.2 Tool

I just installed 64 bit Notepad++ v8.6.8 and tested the 64 bit build and it seems to be working for me. Please keep in mind that the builds I've uploaded here are Debug builds and for testing purposes only. Maybe @nea can reply to my above request about how to build a release build and I can build this for release.

@asmwarrior Here's a 64-bit version of the plugin. Please see if it works.

MarkdownViewerPlusPlus-0.8.3-x64.zip

[rautamiekka]

Yes, x86 is for 32bit application, and x86 is for 64bit application/dlls.

Did you mean x64 or maybe x86-64 for the latter ?

[asmwarrior]

Yes, x86 is for 32bit application, and x86 is for 64bit application/dlls.

Did you mean x64 or maybe x86-64 for the latter ?

Oh, sorry, it is a mistake, I have updated my comment for fix that typo.

[asmwarrior]

Hi, I can confirm that if I use a local image with relative path, such as:

![](image/aaa.png)

I see that the NppMarkdownPanel plugin shows the image correctly, but MarkdownViewerPlusPlus failed to show the image.

Any idea to fix this issue in this plugin? Thanks.

Hi, @bhu1st I can confirm the mentioned issue is fixed in your MarkdownViewerPlusPlus-0.8.3-x64.zip

Thanks.

[StevenHachel]

## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Result:

Show images and live scrolling dosent work.