+ 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! ❤️
16 Answers
+ 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
+ 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.
+ 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
+ 1
we will wait for the code.
the other answer is not relevant here
+ 1
<!-- index.html -->
<img src="images/example.jpg" alt="Example Image">
0
I will send it, as soon as I come back to my lap top.
What part of Yugoslavia do you come from?
0
Understood
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© 2024.</p>
<br>
<h3><a href="#logo">Back To The Top</a></h3>
</body>
</html>
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
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
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!! ❤️
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....
0
Problem was '/'. When i removed / before folder name, pictures instantly loaded on live server and directly from folder of the project.
0
Yes, just like that!
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..
0
Yeah, my images automatically were on JPEG extension. Thanks for the tip in a future..
Often have questions like this?
Learn more efficiently, for free:
Hot today
Python
2 Votes
Is it possible to search your code-bits by name/alphabetically (especially in mobile-devices) ?
1 Votes
This kind of language creates a negative and uncomfortable environment for other users [off-topic]
3 Votes
List is [1,2,3,4,5,6,7,8....]
1 Votes
After completing the course!!
2 Votes