Add image in Readme.md for VS-code extension

Question

I am Creating snippet extention of react-native for VS-code. In that I want to add some images into README.md file, which finally show images on marketplace inside description tab of my extention.

I have tried below things in README.md but it gives me error:

![feature X](/images/SnippetDemo1.png)

ERROR Couldn't detect the repository where this extension is published. The image '/images/SnippetDemo1.png' will be broken in README.md. GitHub/GitLab repositories will be automatically detected. Otherwise, please provide the repository URL in package.json or use the --baseContentUrl and --baseImagesUrl options.

Tympanist

"please provide the repository URL in package.json or use the --baseContentUrl and --baseImagesUrl options" cannot be clearer. – Vermilion

So I have to upload my image on repo or full extension code? – Tympanist

Or where do I have to use --baseContentUrl and --baseImagesUrl options? Can you please give more detail, because I know I have to do that but am unable to figure out how to do it? – Tympanist

You can refer to vsce documentation, github.com/microsoft/vscode-vsce – Vermilion

Answer 1

Make sure you have a repository listed in your package.json as the error states:

{
  "name": "cotr-snippets",
  "displayName": "COTR Snippets",
  "publisher": "CodeontheRocks",
  "repository": "https://github.com/CodeOTR/cotr-snippets",
...
}

When the extension is published, the image address in the README will be updated to use the GitHub repo image.

README.md

![COTR Snippets](./cotr_snippets.png)

VS Code Extension Image Address

https://github.com/CodeOTR/cotr-snippets/raw/HEAD/cotr_snippets.png

Check out my VS Code Extension repo for reference

Appetite