I have searched everywhere for an answer and cannot find one. For some reason, in my HTML document, an image will display when opened from my browser fine. But when I upload my site to a server host this one specific image won't show.
Code:
<html>
<body background="images/background.jpg">
<img src="images/pp_4.png" style="float:left" vspace=50>
<center><img src="images/logo.png"></center>
<hr color="pink">
<style>
#font-face{
font-family:"chococookie";
src:url("font/choco_cookie.ttf")
}
p{font-family:chococookie;
font-size: 100%; }
</style>
<!---------------------------------------------------------------------------------->
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src=""></center>
<center><p></p></center>
<center><img src="images/image_226.jpg"></center>
<center><p>Love Live! gone sexy. #anime #sexy #ecchi #lovelive #bikini #chan #tyan #girl #kawaii #cute - 22 Oct at 10:48 pm</p></center>
<!---------------------------------------------------------------------------------->
<hr color="pink">
<center><img src="images/more_images.png" /></center>
</html>
I have tried resizing the image, and many other things, but nothing worked. The image not displaying is pp_4.png.
Make sure that image's name uploaded to your server matches name that you have written in your code. I mean, check for uppercase and lowercase letters, as far as you are probably using Windows that doesn't care about letters register. Your server might be using Linux that does care about it
First you need to make sure the image was uploaded to the server successfully. Try accessing that image without using your HTML code. For example, if your domain is www.example.com and your images directory is in the root folder, you should be able to access images from URLs such as:
www.example.com/images/image_226.jpg
Try to access the image you are referring to by using www.example.com/images/pp_4.png. You need to know where you are placing your images and if they have been uploaded successfully to the server. Then use your HTML code to access those images and it should work.
Related
I am trying to add a logo to my webpage. I am using CSS and eclipse. The image shows as a broken image and I am not sure why. The image I am trying to use is in the folder specified :
Does it need to be added in CSS or can someone please help me to know where I am wrong. Thank you.
<body>
<div class="jumbotron">
<h2 style="text-align: center; color: white;"> New Plan </h2>
<a href="#">
<img src="resources/img/logo.png">
</a>
</div>
</body>
This wouldn't be a css issue if the browser is showing the broken link icon. That icon means the path to the file is incorrect or it can't retrieve it.
To confirm this, take resources/img/logo.png and add it to the end of the URL where your HTML is, excluding any files. For instance, if your URL is http://example.com/index.php, you want to make the URL read as http://example.com/resources/img/logo.png, without the index.php.
You will need to tweak this URL until the image shows up in the browser, since you didn't provide a URL where the HTML is running. When that happens, the URL in the address bar is the one you can use for the image URL.
i am using html image like this
HTML :
<div class="home" style="background: #f2f2f2;">
<div class="pr_blank"></div>
<!-- <div id="now" class="show"> -->
<div class="ptgamebox">
<img src="../../images/ges.jpg" / ">
<!-- <em class="game_ro3d"></em> -->
<div class="game-name">test</div>
</div>
</div>
</div>
My images are in a folder like this D:\APP\images\pt\ges.jpg
Loaded Page Image :
now when i see in browser this image is being loaded but in console it shows error like this
file:///images/ges.jpg net::ERR_FILE_NOT_FOUND
Will someone help me whats wrong with it ?
Try this:
<img src="APP/images/pt/ges.jpg">
If this won't work,
change it like this:
<img src="images/ges.jpg"> or <img src="images/pt/ges.jpg">
Hope it helps.
Sometimes this error comes due to control characters... I also face this problem recently, no matters what path I gave (absolute or relative) error remains the same.
Finally I solved this by NOT COPY pasting PATH of image
Try to type your image's path by keyboard, you can also copy and paste once, tally the same code by typing and then remove the copy pasted one. Here you have some screenshots from my PC
This is how error looks likes in console
In this image, line no. 13 path is copy pasted, in line 14 I have typed it.... then remove the line 13
Finally image start appearing in browsers
This error means that file was not found.Either path is wrong or file is not present where you want it to be. Try to access it by entering source address in your browser to check if it really is there. Browse the directories on server to ensure the path is correct. You may even copy and paste the relative path to be certain it is alright.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
<body style="background-color: paleturquoise">
<h2 style="color: red">Duke's soccer League: Home Page<br/></h2>
<ul style="list-style-type: circle">
<li style="font-size: larger">All Leagues list</li>
<li style="font-size: larger">Register for a League (TBA)<br/><br/></li>
</ul>
<h2 style="color: red">League Administrator</h2>
<ul style="list-style-type: square">
<li style="font-size: larger">Add a new League (TBA)</li>
<img src="C:\Users\VIRK\Desktop\66.jpg" width="400" height="400" ></img>
</ul>
</body>
I am currently practice with JSP and I try this html code to make a web page on NetBeans IDE 7.0 but when I'm build and run the page no error in code but the image is not showing in the browser.
Edited:
Here I have given the screenshot of the NetBeans IDE where you can see the image is existing in Web-INF folder and the index.jsp page too and I tried with "/" before the image name but it won't work. The exact path of my project is C:\Users\VIRK\Documents\NetBeansProjects\practiceJSP .
<img src="/66.jpg" width="400" height="400" ></img>
I find out the way how to set the image path just remove the "/" before the destination folder as "images/66.jpg" not "/images/66.jpg" And its working fine for me.
You put inside img tag physical path you your image. Instead of that you should put virtual path (according to root of web application) to your image. This value depends on location of your image and your html page.
for example if you have:
/yourDir
-page.html
-66.jpg
in your page.html it should be something like that:
<img src="66.jpg" width="400" height="400" ></img>
second scenario:
/images
-66.jpg
/html
page.html
So your img should look like:
<img src="../images/66.jpg" width="400" height="400" ></img>
Your path should be like this : "http://websitedomain//folderpath/66.jpg">
<img src="http://websitedomain/folderpath/66.jpg" width="400" height="400" ></img>
I don't know where you're running the site from on your computer, but you have an absolute file path to your C drive: C:\Users\VIRK\Desktop\66.jpg
Try this instead:
<img src="[PATH_RELATIVE_TO_ROOT]/66.jpg" width="400" height="400" />
UPDATE:
I don't know what your $PROJECTHOME is set to. But say for example your site files are located at C:\Users\VIRK\MyWebsite. And let's say your images are in an 'images' folder within your main site, like so: C:\Users\VIRK\MyWebsite\images.
Then in your HTML you can simply reference the image within the images folder relative to the site, like so:
<img src="images/66.jpg" width="400" height="400" />
Or, assuming you're hosting at the root of localhost and not within another virtual directory, you can do this (note the slash in the beginning):
<img src="/images/66.jpg" width="400" height="400" />
all you need to do is right click on the jsp page in the browser, which might look like "localhost:8080/images.jpg, copy this and paste it where the image is getting generated
I had same kind of problem in Netbeans.
I updated the image location in the project and when I executed the jsp file, the image was not loaded in the page.
Then I clean and Built the project in Netbeans. Then it worked fine.
Though you need to check the image actually exists or not using the image URL in the browser.
I had a problem where the images would not show and it wasn't the relative path. I even hard coded the actual path and the image still did not show. I had changed my webserver to run on port 8080 and neither
<img src="c:/public/images/<?php echo $image->filename; ?>" width="100" />
<img src="c:/public/images/mypic.jpg" width="100" />
would not work.
<img src="../../images/<?php echo $photo->filename; ?>" width="100" />
Did not work either. This did work :
<img src="http://localhost:8080/public/images/<?php echo $image->filename; ?>" width="100" />
do not place *jsp or *html in root folder of webapp and images you want to display in same root folder browser cannot acess the image in WEB-INF folder
I also had a similar problem and tried all of the above but nothing worked.
And then I noticed that the image was loading fine for one file and not for another. The reason was: My image was named image.jpg and a page named about.html could not load it while login.html could. This was because image.jpg was below about and above login. So I guess login.html could refer to the image and about.html couldn't find it.
I renamed about.html to zabout.html and re-renamed it back. Worked.
Same may be the case for images enclosed in folders.
the easy way to do it to place the image in Web Content and then right click on it and then open it by your eclipse or net beans web Browser it will show the page where you can see the URL which is the exact path then copy the URL and place it on src=" paste URL " ;
If we are using asp.net "FileUpload" control and want to preview image before upload we can use below code.
<asp:FileUpload ID="fileUpload" runat="server" Style="border: none;" onchange="showpreview(this);" />
<img id="previewImage" src="C:\fakepath\natureImage.jpg">
<script>
function showpreview(Imagepath) {
var reader = new FileReader();
reader.onload = function (e) {
$("#previewImage").attr("src", e.target.result);
}
reader.readAsDataURL(Imagepath.files[0]);
}
</script>
Another random reason for why your images might not show up is because of something called base href="http://..." this can make it so that the images file doesn't work the way it should. Delete that line and you should be good.
You need to import your image from the image folder.
import name_of_image from '../imageFolder/name_of_image.jpg';
<img src={name_of_image} alt=''>
Please refer here.
https://create-react-app.dev/docs/adding-images-fonts-and-files -
The folder names in the path should not contain the space
write fullstack /asset/image.jpg instead of full stack/asset/image.jpg
i write this code in a html page but it doesn't show the image what is problem?
<html>
<head>
<title>register page</title>
<body>
</head>
<table align="center">
<tr>
<td>
<img src="C:/xampp/htdocs/me/images/register.jpg" width="600" height="395">
</td>
</tr>
</table>
</body>
</html>
You have provided a full file path, not a relative path or URL.
If your website lives in htdocs, try changing the path to /me/images/register.jpg
If you're running it served from the actual server, the image src is invalid. It needs to be relative to your application root. In other words, if you application root is C:/xampp/htdocs/me, then your image tag should actually be <img src="/images/register.jpg" width="600" height="395">
did you check if is it the image available on that folder?
it would be nice if you are using relative path:
Relative Path URLs
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information listed filename sub-directories are listed without any preceding slashes weekly/filename links up one directory are listed as ../filename
How to determine the relative path:
Determine the location of the page you are editing. This article is located in C:/xampp/htdocs/me/ folder on your site.
Determine the location of the page or image you want to link to. The Beginner's Resource Center is located here: C:/xampp/htdocs/me/images/
Compare the locations and to decide how to point to it From this article, I would
need to step up one directory (to/library) and then go back down to the beginning directory
Write the link using the rules listed above:
<img src="images/register.jpg" />