Image not displayed in vs code

Question

I use VS Code, and Live Server extension, I am trying to put an image with the <img> tag, the image was in the same folder and named coin.png, I tried to type <img src="coin.png>" but this is what I get in the browser here, I tried to see the browser's console and I got this message coin.png:1 Failed to load resource: the server responded with a status of 404 (Not Found), the weird thing is that it works with any other IDE, why does that happen and how to solve it?

Answer 1

Note that, in addition to Live Server extension, issue 2982 "inline HTML results" is gaining traction now (May 2023) that there is progress on xtermjs/xterm.js issues 614.

You can see a concrete example with application With VSCode PR 182442 (from issue 182443) which integrates jerch/xterm-addon-image: it comes with support for both sixel and iTerm's inline image protocol (png, jpeg, gif [initial frame]).

That means you can also see pictures directly from a VSCode terminal:

This is available with VSCode 1.79 May 2023 (or VSCode insiders today).
This is finalized with VSCode 1.80 (June 2023): PR 184449.

terminal.integrated.enableImages

Enables image support in the terminal.
Both sixel and iTerm's inline image protocol are supported on Linux and macOS, Windows support will light up automatically when ConPTY passes through the sequences.
Images will currently not be restored between window reloads/reconnects.

Answer 2

you must use relative path or absolute path from your html file to your image file like this

<img src="./coin.png" />

If your image file is in the same place with your html file Or

<img src="[path to your image file]/coin.png" />