Vscode-vsce: Relative sources in <img> tags in README.md are not rewritten to absolute URLs

[fabiospampinato]

I wrote a readme file in markdown, and I had no problems putting a local gif in it, but vsce complained about a local png, maybe because I inserted it like this (just for centering it):

<p align="center">
    <img src="resources/logo.png" alt="Logo">
</p>

[joaomoreno]

Can you show me what "complained" means? Did you get an error?

[fabiospampinato]

Exactly, more specifically this error:

Error: Images in README.md must come from an HTTPS source: resources/logo.png

[joaomoreno]

Is your extension in a GitHub repository? Can I check its sources?

[fabiospampinato]

Sure, here it is.

[joaomoreno]

I've cloned that repo and ran npm i and then vsce package. It worked:

vscode-projects-plus master* → vsce package
Executing prepublish script 'npm run vscode:prepublish'...

> [email protected] vscode:prepublish /Users/joao/Desktop/vscode-projects-plus
> tsc -p ./

Created: /Users/joao/Desktop/vscode-projects-plus/vscode-projects-plus-1.0.1.vsix

Something must be off in your machine.

Do you have the latest vsce installed?

[fabiospampinato]

You forgot to edit the readme, it worked because now it's written in other way, otherwise I wouldn't be able to publish it because of the error I'm reporting.

Replace this:

<img src="https://raw.githubusercontent.com/fabiospampinato/vscode-projects-plus/master/resources/logo-128x128.png" alt="Logo">

With this:

<img src="resources/logo.png" alt="Logo">

If you have sed available just run:

sed -i -e 's/https:\/\/raw.githubusercontent.com\/fabiospampinato\/vscode-projects-plus\/master\/resources\/logo-128x128.png/resources\/logo.png/g' README.md

Yes, I'm using the latest version of vsce.

[fabiospampinato]

I believe I found the problem, here it checks if the url is relative, but just for images written in the markdown syntax.

If the image is written as an html tag it doesn't run the same check.

[joaomoreno]

Got it. We don't support relative paths in <img> tags. You simply won't be able to reference that image in that relative fashion and keep using <img> tags.

Either keep using a full URL in the <img> tag, or drop the centered paragraph tag and use the markdown syntax for images: ![Logo](resources/logo-128x128.png)

[fabiospampinato]

Is there a good reason for not enforcing the same rules for both cases?

[joaomoreno]

We try to locate (regex) where images are used in Markdown and upon finding those locations we rewrite their relative URLs to be absolute ones, if we also detect the repository in which the extension will be hosted. We don't do the same for image tags since that is just harder to parse and rewrite. If you feel that passionate about it, feel free to submit a PR which addresses that. 👍

[letmaik]

I would find this very useful as well. I can't use the markdown syntax for images as I need to include the width attribute. The reason is simple: the image is a screenshot made on a high-dpi screen, and it just blows up in size as browsers don't read pixel density information (which PNGs don't have anyway) and just assume 72. Setting an explicit width fixes that on all display densities.

Demonstration:

Markdown syntax:
![](https://raw.githubusercontent.com/letmaik/vscode-git-tree-compare/master/screenshots/main.png)

HTML:
<img src="https://raw.githubusercontent.com/letmaik/vscode-git-tree-compare/master/screenshots/main.png" width="230">

[chrisdothtml]

~+1~

~My use case is with aligning images. AFAICT there's no way to do it with markdown~

EDIT: whoops, thought this was an issue for adding support on Github, not vscode 🤦‍♂

[Abbyyan]

But why even if i use a http url , it can't works.
![commands.gif](http://xxxxxx)
The Error is Images in README.md must come from an HTTPS source: http://xx

[letmaik]

Switch to https ;-)