Support for showing images in html files also ?

[mmc41]

Very nice plugin. Would be even nicer if it can also preview images inside HTML files besides CSS files.

[kisstkondoros]

In version 0.4.0 it should be available 🎆

[mmc41]

Great - does not work for me (0.4.0). Maybe because I am using urls relative to the base path as default in angular2 cli projects. E.g <img id="logo_image" src="assets/icons/app_logo.svg">

You properly need a configuration option that can be set per project base to deal with relative urls like this?

[kisstkondoros]

This should work actually out of the box if assets/icons/app_logo.svg is in the root of the project or it is relative to the referencing file

[mmc41]

In angular 2 default project layout, it is located as a subfolder to src (not directly at the root) and they are not relative. Ie.

src/app/xxx is where html and js components are located. src/assets/xxx is where images etc. is located.

Maybe gutter need a .gutter config file at the project root where one can setup search paths - in this case "src" ?

[kisstkondoros]

In the version v0.5.0 there is a new configuration variable which you can set like { "gutterpreview.sourcefolder": "src" }

[mmc41]

Tried the new setting, but it is not working. Is there a log or something I can investigate?

[kisstkondoros]

While investigating what could be wrong I've found out that images are not recognized in html files correctly, now I've added a regex to recognize img src's as well. Hopefully it is getting better and starts to work for you!

[kisstkondoros]

oh it should be in v0.6.0

[mmc41]

Not working for me but I assume it is because you are using relative paths in the img src attribute while I am using paths like "/assets/login_logo.svg" ("assets" is a subfolder of "src" which is in the project root).

[kisstkondoros]

Just like in the example I've attached (the second example), maybe it is not working because it ends up with '//' at the end, I'll have a look.

[kisstkondoros]

still works for me

[mmc41]

Verified. It does work for non-absolute paths. So it is only when prefixed with "/" that it does not. Even though your example does work. Strange.

[mmc41]

BTW: Great to see the previews in the gutter when it works. Very nice feature.

[mmc41]

The images referred to by absolute paths are still not working for me - would it be possible to log failed lookups so we could see what is going on?

[kisstkondoros]

Could you please refer to an open source project where I can test this?

You can even debug it pretty easily clone the repo open it in VSCode select the debug panel on the left in the top dropdown select "Launch extension" press the play button

interesting parts are the different AbsoluteUrlMapper instances, try to place some breakpoints and open up your project where you can easily reproduce the issue.

Sorry but the current way how I detect the image paths is a mess, if I would log every unsuccessful result it would spam the output console.

But as I said, if you could provide me an open source repo where I can reproduce it, most likely the fix would not take much time

[mmc41]

Maybe you could add a debug setting in the configuration that users can set to true when diagnosing problems like this? Then I could start/stop the "spam" when needed.

I plan to release most of the code I am doing right now as Open source, but not yet so it is not practical to share it yet. Sorry.

[kisstkondoros]

I'm not asking you to release your current project, I just need to have a minimal reproduction environment where I can debug it...

[mmc41]

I have yet to reproduce this in another project but a key finding so far is that it depends on context. Sometimes it works sometimes not:

Extract of file where it works:

          <article class="news_item clearfix">
              <h1>News Block with Image</h1>
              <img src="/assets/icons/landscape_icon.svg">
              <p>
                  Now, this is a story all about how
                  My life got flipped-turned upside down
                  And I'd like to take a minute
                  Just sit right there
                  I'll tell you how I became the prince of a town called Bel Air
              </p>
              <time>6/23/2010 &#8226;</time>
              <a href="">Link goes here</a>
          </article>

Extract of file where it does not work (note same absolute url):

<template [ngIf]="isLeafType">
    <div class="single_instance flex_align" (click)="onSelect($event)" (keyup.enter)="onSelect($event)" [class.selected_node]="isSelected()" [attr.tabIndex]="isPlaceHolder ? null : '0'">
        <p>{{treeNode.title()}}</p>
        <img class="refresh_icon" src="/assets/icons/landscape_icon.svg" *ngIf="canRefresh">
    </div>
</template>

[kisstkondoros]

Thanks for the example, it turned out to be a RegExp issue at the end (hopefully) v0.6.2 is now in the market, I'm curious if that has solved the problem finally, so please write back if it worked out! Oh and thanks for being patient!

[mmc41]

Yes, it works great now - thanks for fixing.