12

i have installed vscode with official microsoft python package , every thing is ok except images rendering in markdown

i tried the following codes for displaying images in markdown cell :

<img src="images/grad_summary.png" style="width:600px;height:300px;">

alt

![title](images/grad_summary.png)

but it is not working although it is working on jupyter notebook

P.S.

vscode version: 1.40.1

python version : 3.7

vscode python extension version : 2019.10.44104

os : windows 10

Any Help :)

Improve this question
2

7 Answers 7

Reset to default
9

seems they have fixed it

#%%[markdown]
# ![title](sample_image.png)
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

![Inlet Spike](inlet_spike.png) Worked for me in VS Code, as an example to others. Thanks!
8 
%matplotlib inline
from IPython.display import Image
Image('image_path')
Improve this answer

2 Comments

It's not clear how this answer the question, can you explain how this solution works?
I use %matplotlib inline and the images/plot/graphs show up correctly, Refer to: stackoverflow.com/questions/43027980/… for more definition
1

This is a known issue with local paths to images: https://github.com/microsoft/vscode-python/issues/7704

Unfortunately there is no workaround.

Improve this answer

Comments

1

First you can drag a picture from VS Code file explorer and then dropping it in a Markdown cell holding shift button.

If you still having problems displaying the image, try to delete everything written in the file link except the picture's name. In your case you would have something like this:

![title](grad_summary.png)

Improve this answer

1 Comment

This solution worked for me. I was able to drag it from my desktop instead of having to navigate to the image via VSC's file explorer.
0

As of 31/05/2022, If you initially create the file in Jupyter Notebook and later open it in VC Code, the code for embedding the picture is:

![picTitle](attachment:ch01_05.jpg)

Just delete 'attachment:' (to express the reference in the right format)

 ![picTitle](ch01_05.jpg)

and the picture will load. (given the reference/path to it is still valid)

Improve this answer

1 Comment

But how do you attach inside of vscode
0

<img src="images/grad_summary.png"> works for me now

vscode info

Version: 1.74.3 (user setup)
Commit: 97dec172d3256f8ca4bfb2143f3f76b503ca0534
Date: 2023-01-09T16:59:02.252Z
Electron: 19.1.8
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Windows_NT x64 10.0.19044
Sandboxed: No
Jupyter extension: v2022.11.1003412109
Improve this answer

Comments

0 
 ![Tux, the Linux mascot](./assets/images/tux.png)

 # ![title](./assets/images/tux.png)

Work with me

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.