Hover image doesn't work

[PixelT]

The image is display on gutter, but on hover nothing happen (on hover I have tooltip about background-color property)

[kisstkondoros]

Thanks for reporting the issue!

Could you please provide more details? Perhaps the folder structure and the image which causes the problem?

I've tested it with vscode 1.17.0-insider, and image-preview 0.10.0.

[PixelT]

Yep, sure. My folders structure is look like this:

assets
-- css
---- style.css
-- img
---- landscape.jpg
sources
-- scss
---- style.scss
-- img
---- landscape.jpg

I hope it's clear for you. I write code in sources/scss/styles.scss and compile file + image goes to assets -> img/css catalog

Preview on gutter works also in style.scss and style.css I use VSC 1.16.0

[kisstkondoros]

I've tried to reproduce the problem, but in every combination which I've tried it worked just fine. I think it might be caused by some other installed extension which interferes with image-preview. It would be nice if you could provide the list of installed extensions.

Thank you!

Meanwhile I've tried to reproduce the bug by adding a bunch of extensions which add info to the hover widget without luck. Interesting.

[PixelT]

I think extensions doesn't affected here - I disabled all my installed extension and still don't see preview image on url hover....

[kisstkondoros]

Do you see any exception in the developer tools? (You can find it in the help menu) It would be great if you could attach the log from that. If there is an exception when you try to hover over the url, that must appear in the dev tools' console.

[byman64]

vs code 1.6.1, just noted that I have the same issue. I dont see the preview image on the left side and I also dont see the image preview on moseover.

Any idea?

[kisstkondoros]

@byman64 @PixelT In order to fix these issues I'll need further information. Please provide the following:

• Minimal reproducible example (please start from scratch, or at least provide a link to a repo where it is reproducible)
• VSCode version
• Extension version
• OS version

[byman64]

Info required

• I created an new html page with just 1 row (see screenshot)
• VSCODE: 1.161
• OS: Windows 10 x64
• Extension Version 0.10.0 note: I tried to remove the extension and reinstall again, but still not works. I can provide you a teamviewer session if your want.

[kisstkondoros]

@byman64 this issue is known (See #9) and I'm going to investigate what can I do with it, but vscode changed the content security policy in https://github.com/Microsoft/vscode/commit/73015a5e052e6de8ecd60eed2670bea81fad8cac, therefore urls with http: are rejected by the host process. IMO I can't do anything with it but I'll try.

[PixelT]

I disabled all extensions. VS Code version: 1.16.1 Extension version: 0.10.0 OS: macOS Sierra

[kisstkondoros]

@PixelT Please try with vscode-gutter-preview@0.10.1, It might have been caused by a sneaky string concatenation instead of path.join. Since I don't have macOS to actually test it, it would be nice if you could sign back.

[kisstkondoros]

@byman64 I've added an ugly workaround in vscode-gutter-preview@0.10.2 to cover http hosted images at least partially, please check it and open a separate ticket if you encounter any issues

[PixelT]

The preview still doesn't work for me. I also try to change path in gutterpreview.sourcefolder but still with no effects

[byman64]

Still not working with 0.10.2 Mouse over does not show anymore any box, with 0.10.1 I have seen a box for preview with missing image. No image preview in the gutter.

See screenshot

[kisstkondoros]

@byman64 this one fails because the url does not contains any extension. (adding ?.png to the end of the url like http://lorempixel.com/g/600/400/abstract/?.png it works, but it's a hack) And I'm not going to change this behavior https://github.com/kisstkondoros/gutter-preview/blob/c2139586fe15e726a403d00a1c4fa8394353384d/src/extension.ts#L28 Also if you have further issues, please open a new ticket.

[kisstkondoros]

@PixelT gutterpreview.sourcefolder has nothing to do with your problem, since the image can be seen on the gutter, I'm quite sure I've messed up something with the url/file path parsing, in v.0.11.1 I've removed a hack so, please give it a try.

[byman64]

Hi, thx for your reply. I tried and as you can see in the screenshots: 1 - image preview on mouse over on png works 2- on the gutter I dont see the preview of my image but your logo

I also tried the same previous src url but with hack /?.png and as you said it works but only on mouse over. Without hack it does not work (see 3rd screenshot)

<img src='http://lorempixel.com/g/600/400/abstract/?.png' alt=''/> (see the second screenshots) but it does not works

Let me know if you need more details, more test...thx

[kisstkondoros]

@byman64 This is the expected behavior, vscode blocks images to be loaded from http, therefore some workaround has been introduced to show these in the hover widget, but this can't be done with reasonable performance for the preview on the gutter.

[kisstkondoros]

@PixelT any updates? If it is not working please create a repo which I can fork in order to reproduce the problem, it really bothers me.

[EmilianoTalamo]

For me, the gutter preview works just fine, but the hover only works with external image sources.

VScode 1.17.0 on Linux Mint 18.1 x64

[byman64]

Hey man

VS Code 1.7.1 WORKS!!!! note I am on windows 10 x64

thanks for your work...it's really useful!

Here a screenshots

ciao

On 11 October 2017 at 01:10, Emi Talamo notifications@github.com wrote:

For me, the gutter preview works just fine, but the hover only works with external image sources.

[image: image] https://user-images.githubusercontent.com/12476222/31414953-d13660a0-adf6-11e7-86d0-0e6f69dd307f.png

[image: image] https://user-images.githubusercontent.com/12476222/31414959-d4abb000-adf6-11e7-9a25-a9848cfbaf79.png

[image: image] https://user-images.githubusercontent.com/12476222/31414973-e324c5d6-adf6-11e7-8c83-0eaa31299a62.png

VScode 1.17.0 on Linux Mint 18.1 x64

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kisstkondoros/gutter-preview/issues/10#issuecomment-335634349, or mute the thread https://github.com/notifications/unsubscribe-auth/AC24JD0KJ8uBTfXykhvTWwGMxqiZLI56ks5sq_lggaJpZM4PR_CS .

--

Antonino Migliore via Giuseppe Verdi 9 43121 - Parma

[kisstkondoros]

@PixelT I've finally found the problem: it was a nullpointer at https://github.com/kisstkondoros/gutter-preview/blob/e37168d394e4fb81205742dcd62223fb0011dcbf/src/extension.ts#L272

please check it out with the newest version :+1:

[PixelT]

For me it works now, thanks ;)