+ 1

Images Problem in HTML

Hello learners, I recently started learning a HTML and CSS and got stuck in my very first project. When I code and open a code on live server to see changes live, my pictures load and everything is super fine. But, when I open my project directly from folder and see if I got any code issues, my pictures don't load on site. It shows just alternative texts. Please tell me what it can be a issue so I can continue learning HTML and CSS. I don't wanna continue with a course while I don't make sure that I learned everything. Sorry if my English is a little bit bad, and also, thank you very much for all future responses. Happy learning and hello from Serbia! ❤️

15th Aug 2024, 9:50 PM
Boško Business
Boško Business - avatar
16 Respuestas
+ 3
yes, I wrote it, / means the root, while ./ the actual working directory, or just don't use that prefix. I'm using ./, but don't ask me why. in the past I didn't use that prefix. the good thing is: now works and you've learned something useful :-) happy coding
17th Aug 2024, 7:47 AM
Mihaly Nyilas
Mihaly Nyilas - avatar
+ 3
I encountered the same issue, U need to change the image extension if its. PNG or png , so the code and how they are saved is similar.
17th Aug 2024, 12:06 PM
Maina William
Maina William - avatar
+ 1
as Linus Torvalds said: talk is cheap, show me the code! show some of the code. specially <img> tags and what's around it.... PS: I was born in Yugoslavia
16th Aug 2024, 7:13 AM
Mihaly Nyilas
Mihaly Nyilas - avatar
+ 1
we will wait for the code. the other answer is not relevant here
16th Aug 2024, 12:19 PM
Mihaly Nyilas
Mihaly Nyilas - avatar
+ 1
<!-- index.html --> <img src="images/example.jpg" alt="Example Image">
17th Aug 2024, 7:27 AM
Lerigeo Xingpaa
Lerigeo Xingpaa - avatar
0
I will send it, as soon as I come back to my lap top. What part of Yugoslavia do you come from?
16th Aug 2024, 9:13 AM
Boško Business
Boško Business - avatar
0
Understood
16th Aug 2024, 9:12 PM
Boško Business
Boško Business - avatar
0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About</title> </head> <body> <img src="/Projekat slike/images.png" alt="Logo" id="logo"> <h3>Coffee Junkie</h3> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="numbers.html">Numbers</a></li> <li><a href="contact.html">Contact</a></li> </ul> <br> <img src="/Projekat slike/Background.jpeg" alt="Background" width="100%"> <br> <h1>About Us</h1> <br> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <br> <br> <br> <p>copyright&copy; 2024.</p> <br> <h3><a href="#logo">Back To The Top</a></h3> </body> </html>
16th Aug 2024, 10:50 PM
Boško Business
Boško Business - avatar
0
About us is way too larger, but i needed to minimize it in a one word so I can actually send code to you guys here on Sololearn
16th Aug 2024, 10:50 PM
Boško Business
Boško Business - avatar
0
Hey guys, update check. I solved an issue by myself like right now. When you define a images path, on src structure in img code, i typed src /Folder name/yourimg.jpeg
16th Aug 2024, 11:26 PM
Boško Business
Boško Business - avatar
0
But, right way to define src is src=foldername/yourpic.jpeg (without freaking /). So basically, all I needed to do is to remove / before folder name and it defined and loaded pictures on browsers perfectly. Thank you anyways guys for helping me!! ❤️
16th Aug 2024, 11:28 PM
Boško Business
Boško Business - avatar
0
don't use spaces, use underscores (_); spaces are converted to %20; src="/" -> root directory (document root) use instead: src="./" -> current directory, or just: src="bg.png" I prefer using all lowercase letters, but that's not a problem if the file name is the same....
17th Aug 2024, 6:11 AM
Mihaly Nyilas
Mihaly Nyilas - avatar
0
Problem was '/'. When i removed / before folder name, pictures instantly loaded on live server and directly from folder of the project.
17th Aug 2024, 6:40 AM
Boško Business
Boško Business - avatar
0
Yes, just like that!
17th Aug 2024, 7:44 AM
Boško Business
Boško Business - avatar
0
Me too, I learned to use just /, without ./. But now I see mistake. Thank you very much, I wish you luck too in your web development journey. Best regards to you..
17th Aug 2024, 7:51 AM
Boško Business
Boško Business - avatar
0
Yeah, my images automatically were on JPEG extension. Thanks for the tip in a future..
17th Aug 2024, 9:54 PM
Boško Business
Boško Business - avatar