Html Question posted in
Some basic documentation can be found here.

Html – Failed to load image from a separate folder, how do I fix it?

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.

Tags:

2

Answers


  1. 0

    First of all, you must understand that when you publish something, it provides greater clarity if you include the technologies, versions, and some of the code. However, what you are experiencing is a problem with static files. For example, when using Node.js, a folder is designated for static files and configured accordingly. The same applies to PHP or Python; it is all based on configuration. Here are some examples:

    some examples
    NodeJs + express: https://medium.com/@nitinpatel_20236/easiest-way-to-share-static-files-from-your-node-server-808a98ad1837
    python:django: https://docs.djangoproject.com/en/5.0/howto/static-files/

    Good luck

    Login or Signup to reply.
  2. 0

    use src="./assests/cinnamoroll 2.jpg".
    Since you are in a different folder, relative path needs to be from there to the the file you want to load.
    the ./ will take you to src and the rest follows.

    Also you image file name has "space" in it. That is not recommended in webApp folder.
    use _ or – instead of spaces.

    https://www.w3schools.com/html/html_filepaths.asp

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search