My html images don't work although the code is right - html

Question

Almost every single time that I add an image in my code in VS code, it is broken in the browser.
I always make sure to have the image in the exact same folder as the rest of code, or in an images folder which I have in the same folder as the rest of my code, but it still does not work.
At the moment, my code looks like this:
<img src="/ae24874dd301843548c034a3d2973658.png" alt="" class="cat">
And the .png is in the same folder as the rest of my code files. Why does it still not show?
Edit: Ok so I "made it work" by opening it through the live server extension (by pressing Go Live, after first restarting the program). But if I try to open it through chrome the images are still broken. It is still weird to me...

Answer 1

As the image is in same folder, use this
<img src="./image.png" alt="" class="cat">

Answer 2

With / you start at the root of the Computer or Server. Try using a relative path.
On Windows / is C:\ drive. If you use a localhost like xampp the htdocs folder is the root.
Without the / your path will start at the same folder as your html
Try
<img src="ae24874dd301843548c034a3d2973658.png" alt="" class="cat">
or
<img src="./ae24874dd301843548c034a3d2973658.png" alt="" class="cat">
More about paths : https://www.w3schools.com/html/html_filepaths.asp