Image not loading


 <ul id="red">Strike
         <img src="Strike1.png" > 
     <ul id="yellow">Blast</ul>
     <ul id="green">Ki card</ul>
     <ul id="Blue">Special move</

I put the image in the file where html and css and js are at and when I open it in vscode, it says: An error occurred while loading the image

1 Like

Does it show if you open the HTML in a browser?
I notice it is not showing here where you uploaded it, so there may be some problem wit the image format, possibly the colour mode.

1 Like

Capitalization matters. Strike1.png is something different than strike1.png or Strike1.PNG.
Make sure the filename and what is in the HTML is exactly the same.

1 Like

I checked those.


Doesn’t show the pic.

I changed the color to og and still doesn’t work.


Try loading the image into your paint package and then re-save it with a new name in the format you require.

I assume you can see all the other images ok in that folder.

I can’t put any images in the website, always a broken image icon.

I can’t open any image

So it’s not just this particular image?
Do no images display at all?


Have you tried different image types, Jpeg, Tiff, WebP, SVG, etc?

nope, ill do that rn

For tiff, unable to open file
For SVG, same thing

for WebP and jpeg, same as png and jpg. same error

How are you getting these images?

I’m beyond lost lmao,

I thought I had hope but nope because there were two html files that had the same name. one html file in javascript folder and other html file in the main folder that I will be using. I was using the html file that was in javascript folders and the image files were in the main folder, and I thought by fixing that by deleting one of the html files of the same name and putting it into the correct folder, it will fix the image issues but nope, and now I have another problem.

Whenever I open the Html file, it takes me to a library of javascript.

Are you saying that you had two files called index.html, one of those inside your JavaScript folder? That is sometimes done to prevent the contents of the folder being displayed accidentally. If somebody enters, they will be taken to the index page in that folder, rather than seeing the contents of the folder. It sounds as if you have removed that index.html page and are now seeing the folder contents instead.

I’ve never used vscode so have no idea how it works, but I would suggest you restore the file you deleted and see if that helps. We can take it from there.


Oh no, I trashed that file that was in the java script folder,
so it is long gone.

I kinda don’t understand what you mean by folder contents, because I’m not opening the folder, I’m opening the file called Dragon Ball Legends.html that is inside the folder. how is that possible?


Should I just make another folder and files and copy the previous to these?

I fixed it, gg. I don’t understand what I did to fix it. and that kinda sucks because I wanted to understand why it did that. welp, next time.

I think there were 2 folders inside vscode, and I took out the javascript folder to just add the main folder, and it worked but not sure.

The pics work now for some reason.

Well, I’m glad you’ve got it working, but I’d suggest you spend a little time getting familiar with the system and how it works, to avoid issues in future.

As I say, I’ve never used vscode so I can’t help with that, but deleting things and hoping for the best is seldom a good approach. wink Try renaming things, rather than deleting them, to prevent them being used (e.g. index-old.html) and back up your project regularly - and especially before you do something drastic and irreversible like deleting. smile

1 Like

will do

1 Like

You may also want to look into a versioning system like git, which makes it possible to undo any changes you’ve recorded earlier.

1 Like