Images not showing up from localhost server

php linux permissions localhost

15,122

Solution 1

The problem is that your file has too little file permissions, probably 640. Because your user is owner, you can see the images in the browser when accessing the .html in your browser with url file://.... Because now your own linux user is opening the file.

But; when you try to open the file with url http://localhost/..., your linux user itself is trying to open the file, but the user apache is running from (probably apache or www-data). So this time, the file has too little permissions (the last 0 in the bitmask).

If you run give the image more permissions you should be good;

chmod 644 /var/www/html/path/to/the-image.jpg

And if you don't want to do this everytime you save an image on your pc, open up $HOME/.profile (in a terminal: vim ~/.profile, or the more easy editor pico -w ~/.profile) and add the following line at the very end of the file:

umask 0022

That's it! Don't forget to logout and login again to have this line to have effect.

Note: the instruction about adding the umask command to ~/.profile only applies to (most) Debian systems (including Ubuntu). It might differ for your linux distribution, so please check the documentation for your distro, or ask our omniscient friend google.

Solution 2

Ok thanks to the user @giorgio I found the answer, seems like it only had to do with Ubuntu, restricting permissions to read files, I managed to make it work by running this in terminal:

chmod 644 /var/www/html/*Image path here*

15,122

Author by

Yassir Khaldi

Updated on July 21, 2022

Comments

Yassir Khaldi almost 2 years

so here is the issue: I'm running phpmyadmin to administrate my localhost server,now I've put my project files in the path: /var/www/html/user/register.html I am using Ubuntu OS Everyting seems perfect when accessing to my 'register.html' from this url: file:///var/www/html/user/register.html However when I try to access to the same file from localhost server, This url:'localhost/user/register.html' ,my images are not showing up in the webpage,everything else in the css is good, I tried everything I could think of, changed directories etc.. I googled this for whole morning, but found nothing! can you please help me with this guys...

PS: the images path is correct since they show up when accessing from the first url.

EDIT: I am new to the forum, excuse my lack of experience here, and I put the html/css code below, for the css, I've only put the part of the image

body
{
	background-image: url('pics/1.jpg');
	background-attachment: fixed;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Registration form</title>
	<link rel="stylesheet" href="style1.css">

</head>
<body>	

	<header>
		<div id="sign">
		<a href="#0">Register</a> \\ <a href="signup.html">Sign Up</a>
		</div>
	</header>
	<div class="formulaire">
	<h2>Registration form:</h2>
		<form action="register.php" method="post" >
			
			<label for="first">First name</label><input class="inputs" type="text" name="FIRST_N" id="first"><br><br>
			
			<label for="last">Last name</label><input class="inputs" type="text" name="LAST_N" id="last"><br><br>

			<label for="birth">Birthday date</label><input class="inputs" type="date" name="B_D" id="birth"><br><br>

			<label for="gender">Gender</label>
				<select class="inputs" name="GENDER" id="gender">
					
					<option selected="selected"></option>
					<option>MALE</option>
					<option>FEMALE</option>
				
			</select><br><br>

			<label for="user">Username</label><input type="text" name="USERNAME" id="user" class="inputs"><br><br>

			<label for="pass">Password</label><input class="inputs" type="password" name="PASS" id="pass"><br><br>

			<label for="rpass">Retype password</label><input class="inputs" type="password" id="rpass"><br><br>

			<label for="phone">Phone number</label><input class="inputs" type="text" name="PHONE" id="phone"><br><br>

			<div id="buttons">
				<input class="but" type="submit" name="SUBMIT" value="Sign In">
				<input class="but" type="reset" name="RESET" value="Reset">
			</div>
		</form>
	</div>


</body>
</html>