Why is png not showing without live server?

Question

css

In vscode, using the live server plugin, I work with png. In the tab opened using the plugin, png is displayed as it should, and if you just open the html file, then just alt, nothing is displayed on the hosting either. Other formats are displayed without problems.

<img class="light" src="/img/lighwerwerwerwert.png" alt="Светильники">

Example img

Some images are layered on top of each other with: z-index: x; position: absolute; specifically 2 png + 2 svg. Only 1 png + 2 svg works, the second png doesn't want to.
What to do, how to decide?

Answer 1

<img class="light" src="./img/lighwerwerwerwert.png" alt="Светильники">

Answer 2

I will add a little to the previous commentator:
1. if the link starts with "/" - it means "start from the root of the site (or disk). For example, a link like /images/image.png will be searched either at site.ru/images/image.png , but locally - relative to the section on the screw (c:/images/image.png) where the html file is located. In this case, the path to the directory where the html is located will not be taken into account. The link will be "absolute".
2. if the link will be without a fraction at the beginning of the form "images/image.png" - the path to the image will be built from the location of the html file For example: the file is located in the directory "c:/work/site/index.html", then next to it there should be a directory images with an image, and the browser will open the image in the following path: "c:/work/site/images/image.png".
A link without a fraction will initially work similarly to "./images..."
the dot with a fraction forces it to point to the current directory where the html file is located. The link will be "relative" (i.e. it will be built relative to the location of the html file)
live in the editor allows you to simulate work on the site and substitutes the root directory from the location of the html file. If there is a more complex structure - and live may not help if you build links like this. For local layout, use only relative links. If you need to refer to a directory next to the nesting level, the link can start with "../", which will tell the browser to go up one level of nesting.