can not render images in ipynb files on vscode

Question

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 :)

Although I explained before a simple solution [here](https://stackoverflow.com/a/73559026/5127304), they have anounced by 1st of September 2022 that this issue is incluided in their [August 2022 release of Visual Studio Code (version 1.71)](https://code.visualstudio.com/updates/v1_71) which is mentioned as [Jupyter notebook image pasting](https://code.visualstudio.com/updates/v1_71#_jupyter) — Elias, Sep 02 '22 at 07:17
See also [VSCode 1.78 (Apr. 2023)](https://stackoverflow.com/a/76062235/6309) new drag and drop feature. — VonC, Apr 20 '23 at 08:57

score 7 · Answer 1 · edited Nov 09 '21 at 22:55

7

%matplotlib inline
from IPython.display import Image
Image('image_path')

edited Nov 09 '21 at 22:55

Tomerikoo

18,379
16
47
61

answered Nov 09 '21 at 22:25

Ivan Dobryaev

160
1
5

1

It's not clear how this answer the question, can you explain how this solution works? – joanis Nov 10 '21 at 20:52
I use %matplotlib inline and the images/plot/graphs show up correctly, Refer to: https://stackoverflow.com/questions/43027980/purpose-of-matplotlib-inline for more definition – Sirawit Jan 31 '23 at 09:43

score 6 · Accepted Answer · answered Apr 06 '20 at 14:19

6

seems they have fixed it

#%%[markdown]
# ![title](sample_image.png)

answered Apr 06 '20 at 14:19

SsOo

84
1
3

`![Inlet Spike](inlet_spike.png)` Worked for me in VS Code, as an example to others. Thanks! – Jacob Ivanov May 01 '23 at 18:24

score 1 · Answer 3 · answered Nov 18 '19 at 22:57

1

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

Unfortunately there is no workaround.

answered Nov 18 '19 at 22:57

R Chiodo

494
2
6

score 0 · Answer 4 · answered May 31 '22 at 08:17

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)

answered May 31 '22 at 08:17

sonification

1

But how do you attach inside of vscode – mmann1123 Aug 18 '22 at 17:35

Elias · Answer 5 · 2023-08-05T16:54:02.903

0

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)

edited Aug 05 '23 at 16:54

answered Aug 31 '22 at 16:23

Elias

743
7
16

score 0 · Answer 6 · answered Jan 18 '23 at 10:12

<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

score 0 · Answer 7 · answered Mar 29 '23 at 07:36

0

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

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

Work with me

answered Mar 29 '23 at 07:36

Giang Minh

1
1

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](/help/how-to-answer). – Community Apr 03 '23 at 13:26

can not render images in ipynb files on vscode

7 Answers7

Linked