I have a folder called “src”. Within this folder, I have 2 other folders called “assets” and “code”. I placed the images into the “assets” folder and then copied its relative path and pasted it into my html file. However, it does not work. (As shown below).

(https://i.sstatic.net/LFkIGkdr.png)

In the image, I have the 2 folders inside of the “src” folder with the html file open, calling the image in the code.
But when I open it, using the live server, the only thing that appears is the ‘Hello’ message, from the

Hello

code and the little image icon below it, showing that the image has failed to load.

I found out that the image works if it is located within the same file as the code. I deleted the folder “assets” and only had the folder “code” within the “src” folder. Then, I moved the image into the “code” file and called on the image. This time, the image did appear and worked perfectly fine. (Again, as shown below).

(https://i.sstatic.net/0k3cZdpC.png)

In this image, the “code” folder is contained in the “src” folder. However, I am not sure as to why, on VSC, it appears as “src/code”. Moving on, I had the image in the “code” folder and called it and opened the live server and the image successfully loaded in.

Is there a way to fix this issue or will I need to keep both the images and the code in the same folder? I’m new to coding and I really want to find a solution to this since I really enjoy making projects for fun, but I somehow ran into this issue. Please help me and thank you!

I looked up videos and saw that calling on the relative path would’ve worked, but that was not the case. I expected it to be able to call on the image properly, even if it was in a separate folder from the code, or html file, but all that appeared was an image icon, signifying an error to load it.