I can't get images to work

Code Help HTML/CSS/JS
1

I keep trying to add images to my repl but nothing will work, Ive tried moving the file into different folders then trying to run the repl, but it won’t accept anything.

I was casually just making a breath of the wild guide webpage because I have nothing better to do until I can get tears of the kingdom, so when I tried to add an image (.webp and .jpg) nothing worked and I kept getting Mario’s Blue Question Block.

Screenshot 2023-08-12 at 11.09.34 AM
Screenshot 2023-08-12 at 11.09.34 AM1920×1200 112 KB

Replit page: https://botw-fanpage.nolanbaladi.repl.co/__repl if it helps

pls help, I need it

2

Hey @NOLANBALADI!

Can you try renaming your image to something without a period (then change the src to your new image)? Hope this helps!

3

The one with numbers is just a random image I tried to use so I could see if the file format was a problem but I’ll try

4

I took away the period but it still won’t work

5

Ive also tried using a different type of code to get the image to work but still, nothing

Screenshot 2023-08-12 at 3.17.16 PM
Screenshot 2023-08-12 at 3.17.16 PM1920×1200 117 KB

6

Your HTML file’s path is Divine Beasts/Vah Medoh/vahmedoh.html, so it’s looking for the image in Divine Beasts/Vah Medoh/, but the image is not in that folder. So instead, use ../ in front of the image name, so

<img src="../1682261898.938819.jpg" />
2 Likes
7

Sorry but it didn’t work

1 Like
8

It actually needs to go one more directory up, like so:

<img src="../../1682261898.938819.jpg" />
3 Likes
9

was also changed to 1682261898938819.jpg

10

Yeah, and to note @NOLANBALADI it’s fine to have dots in the filename as long as there is another dot with the extension after. Examples:

:x: Bad filename: myfile.png.cool
:white_check_mark: Good filename: myfile.cool.png

1 Like
11

You would also add ../../ to the beginning when referencing the Vah Medoh picture, like this:

<input type="image" id="image" src="../../Vah Medoh.webp">
2 Likes
12

Or you could just start the path with a / to refer to the root directory.

<input type="image" id="image" src="/Vah Medoh.webp">
1 Like
13

That’s a relative path, meaning that the / would just be in the same directory as the HTML file. (which the HTML file they showed is not in the root directory).

1 Like
14

No, a slash means start at the root directory. It designates an absolute path. See this Stack Overflow answer:

1 Like
15

@boston2029
I already know such ways to add pictures in a webpage, but the image just won’t show up on the website there is nothing wrong with the code, that I am aware of, I just can’t get images to work

Screenshot 2023-08-13 at 10.42.55 AM
Screenshot 2023-08-13 at 10.42.55 AM1920×1200 115 KB

16

If you put a / infront of your image URL, it should work for you.

1 Like
17

Have I not done that already?

1 Like
18

In that screenshot, it doesn’t look like you did.

1 Like