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.
Related
I am trying to build a portfolio website, with a moving gallery but the image is not displayed, it shows the alternative image instead. Any help is appreciated.Here is the code:
<div class="section1">
<img class="imgr"src="photo_1.jpg" alt="nothing">
</div>
I even copied the relative path from Vscode, but it is still not working.
It must be the path to the image. Try replacing "photo_1.jpg" with "./photo_1.jpg".
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" />
I have an image which serves as an a href, the following a href doesn't work:
<div id="buttonNext">
<a href="1-5/redrum-10">
<img id="buttonNextImg" src="../../resources/img/buttonImg/next.png"/></a>
</div>
Me clicking on the link results in me being redirected to this website:
http://localhost/redrumwordpress/wordpress/redrum-10/
which also exists, but it doesn't link me to the correct website, the following code does work and links to the correct website:
<div id="buttonNextBottom">
<a href="1-5/redrum-5/">
<img id="buttonNextImgBottom" src="../../resources/img/buttonImg/next.png"/></a>
</div>
Which re-directs me to the correct page:
http://localhost/redrumwordpress/wordpress/1-5/redrum-4/
I've checked if I missed something like a / or ../ maybe it was in the wrong folder.
I've checked for the file not being there, but it is and it isn't corrupt.
Could anyone help me with why WordPress won't link to the correct website, when I use this website outside of wordpress it works just fine.
Can't you use:
<?php bloginfo('url'); ?>
Which will get your site address, then add the link path relative to this?
I'm working on a website. I have linked the logo image file. The logo is displayed only once when the site runs on the default page i.e. the home page. As I switch on to the other page the logo is not displayed on any page. I have given the correct source path, can anyone help me out on this?
<div id="header">
<a href="Default.cshtml"><img src="Images/logo2.jpg" alt="Twenty47"
style="width:285px; height:250px; margin-top:5px; margin-left:5px;margin-bottom: 0px" /></a>
</div>
I posted a comment: Have you tried setting the path relatively to the root? src="/Images/logo2.jpg". And it seems it was that.
So if somebody has the same problem and comes here, the solution is:
Add / at the beginning of the path in order to make it relative to site's root.
Don't forget the file extensions .jpg and .jpeg are not the same. Webmatrix requires that you use the correct one.