Image src not loading from same directory as unserved HTML file unless edited with autocomplete in VSCode

I have an .html file and an image in a directory structured as such

/project
   chapter1.html
   chapter1_pic.png

In the .html file I have an image tag

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

When I open the .html file (which is not being served) in the browser, the image does not load and the source is not found. I have tried to change the image file permissions and use different paths, HOWEVER if I edit the src attribute in VS Code by tabbing through the code completion menu until I find and click the correct file, I am able to open the .html file in the browser and view the image even though the paths look the same.

Why is this happening and why can I not just view the image normally?