Gabriel Corrêa
Gabriel Corrêa

Reputation: 101

Can't add images to a vscode Extension readme.md

The error

Every time I try to compile the extension with the images inside of the readme.md it returns the following error:

> vsce package

Executing prepublish script 'npm run vscode:prepublish'...

> [email protected] vscode:prepublish D:\projetos\waiter
> npm run package


> [email protected] package D:\projetos\waiter
> webpack --mode production --devtool hidden-source-map

    [webpack-cli] Compiler starting...     [webpack-cli] Compiler is using config: 'D:\projetos\waiter\webpack.config.js'
    [webpack-cli] Compiler finished
    asset extension.js 1.18 KiB [compared for emit] [minimized] (name: main) 1 related asset
    ./src/extension.ts 2.15 KiB [built] [code generated]
    external "vscode" 42 bytes [built] [code generated]
    webpack 5.62.2 compiled successfully in 1625 ms
 ERROR  Couldn't detect the repository where this extension is published. The image './readmeImages/initializing.gif' 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.

It recomends me to run with --baseContentUrl and --baseImagesUrl

> vsce package --baseContentUrl --baseImageUrl

Executing prepublish script 'npm run vscode:prepublish'...

> [email protected] vscode:prepublish D:\projetos\waiter
> npm run package


> [email protected] package D:\projetos\waiter
> webpack --mode production --devtool hidden-source-map

    [webpack-cli] Compiler starting... 
    [webpack-cli] Compiler is using config: 'D:\projetos\waiter\webpack.config.js'
    [webpack-cli] Compiler finished
    asset extension.js 1.18 KiB [compared for emit] [minimized] (name: main) 1 related asset
    ./src/extension.ts 2.15 KiB [built] [code generated]
    external "vscode" 42 bytes [built] [code generated]
    webpack 5.62.2 compiled successfully in 1628 ms
 ERROR  Invalid URL: --baseImageUrl/readmeImages/initializing.gif

Readme.md

## Features

The gif can show you what I'm talking about, you just open the folder and everything is setup for your development session 

<img src="https://github.com/biel-correa/waiter/tree/master/readmeImages/initializing.gif?raw=true" alt="initializing a project">

## Requirements

The Waiter needs a JSON file so that he knows what you want, but don't worry as soon as it runs he'll ask you to create it.

<img src="https://github.com/biel-correa/waiter/blob/master/readmeImages/askingToCreate.png?raw=true" alt="how it asks to create">

view repository

Upvotes: 2

Views: 1306

Answers (1)

Gabriel Corr&#234;a
Gabriel Corr&#234;a

Reputation: 101

I had to open the github markdown editor so that I could drag and drop the files I wanted to show, when you do like that github generates a custom path for the file.

My link

https://github.com/biel-correa/waiter/tree/master/readmeImages/initializing.gif

Generated link

https://user-images.githubusercontent.com/56176344/143320917-12fe3516-36af-4ec5-a073-5c2dd9abdc46.gif

Upvotes: 2

Related Questions