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.
Related
I have this code in my new.php file, which is contained within a folder called contacts in my main website:
<a href="../index.html" id="header-link">
<img src="../images/menuslf100logo.png" id="header-img" />
</a>
When I go to the website and navigate to contacts/new.php and try to click the link, however, it shows up as contacts/index.html and breaks. Using inspect element, the code shows up like so:
<a href="index.html" id="header-link">
<img src="../images/menuslf100logo.png" id="header-img" />
</a>
I honestly have never seen this before. There are three other links in the header that use the same relative path format and they all work perfectly fine. It's just this one that is screwing with me. Has anybody seen this? Is there a fix for it? I've tried deleting the line, saving, and pasting it back in and saving again. No luck. Also tried going with an absolute path by removing the '..'. Didn't change anything. I then moved this link below the next link down just for fun but nothing happened.
Updated with image of file directory:
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 trying to add an image as a sign in button to my website's header. When a user clicks/taps the button, it redirects them to the sign in page. I'm creating a ruby on rails app, and my image is located in "app/assets/images", but I can't seem to get my image to appear.
And I do not want to upload the image to a site such as imgur and link it to my site.
Here is what I've tried so far.
Attempting to link with CSS:
1) background-image: url(../images/sign-in.png) no-repeat;
2) background: url(sigin-in.png);
And I've tried getting it to work with display: block; width:128px; height:128px; position: relative;
Attempting to link with HTML:
<a type="button" class="navbar-toggle btn-signin">
<img class="signin-img" scr="../images/sign-in.png">
</a>
Note: I've tried other methods in HTML too, such as creating <button> tags,<div> tags and<a> tags.
It's a ".png" image, does that play a factor for not appearing?
Try changing the src value of your image to ../../assets/images/sign-in.png.
Your full image element should look like this:
<img class="signin-img" src="../../assets/images/sign-in.png">
Here you are mixing backgound-image and background-repeat:
background-image: url(../images/sign-in.png) no-repeat;
this should be:
background: url(../images/sign-in.png) no-repeat;
Also, in some RoR apps, using MVC pattern, the assets are being referenced from the root level of the app, so you might have to change the paths to the files.
probably you could try removing the "../"?
do you have any other images that are being correctly displayed?
good luck!
I solved the issue! I figured it had something to do with rails, since this only happens when I make rails apps/sites.
Since my html file is erb (embedded ruby), I had to "embed" the image in my html like this:
<img src="<%= asset_path( 'sign-in.png' ) %>" />
Thank you to everyone who answered!
First, make sure it's src not scr.
<img class="signin-img" scr="../images/sign-in.png"> # bad
<img class="signin-img" src="../images/sign-in.png"> # good
Second, open up developer tools (https://developer.chrome.com/devtools) and see if the browser is requesting the image:
images/sign-in.png
It will look like this: (make sure you're in the network tab)
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've got an un-complicated .aspx page and I've added some bookmark anchors at that re-direct to a different page with bookmarks.
The anchors look like this:
From http://www.davincispainting.com/painting-solutions
<a class="questionLink" href="painting-answers#Answer7">Paint Chalking</a>
When you click on this Hyperlink in Firefox, the URL does indicate the bookmark:
http://www.davincispainting.com/painting-answers#Answer7
However, this do not navigate to the actual bookmark in the 2nd page
<h2 id="answer7">Paint Chalking</h2>
The problem occurs in Firefox but not IE8.
I originally thought that the Routing was causing the issue, as I do not inlcude the .aspx page extension in the link. So I added the extension, which still doesn't work.
<a class="questionLink" href="painting-answers.aspx#Answer7">Paint Chalking</a>
How can I debug this problem?
Does the page file end in an extension? If so, make sure your link includes the extension. Also, check your capitalization. Also, the standard practice for the bookmark syntax is to not navigate based on ID of a random control, but rather the anchor tag. See W3 Schools Example.
You should have...
<a id="answer7" />
<h2>Paint Chalking</h2>
and the link should look like this:
<a class="questionLink" href="PATHTOPAGE#answer7">Paint Chalking</a>
Where PATHTOPAGE is replaced with the absolute or relative path to the other page. Make sure that resolves.
The problem was the name itself:
<h2 id="Answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>
is different than:
<h2 id="answer7" style="font-size:1.5em; color:Green;">Paint Chalking</h2>