I saw question about how to add logo to navbar and I tried this
<img src="C:/Users/s003/Documents/Visual Studio 2013/Projects/Model/LOGO.png">
I have already download the picture LOGO.png, and the path I input is where I put that picture. However when I open the web, instead of the LOGO, there is a broken picture icon showed in navbar. Is there anything wrong with my code? I have tried different pictures. Thanks for your help
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="file://localhost/c:/Users/LOGO.png">
<a class="navbar-brand" runat="server" href="~/">Science</a>
</div>
I assume you are viewing your webpage using localhost.(Visual studio server, or apache etc.)
Browsers do not load local file by default due to security reason.
You have to use file path relative to the html file like: ../path/to/images/
or absolute path \path\to\images
You cannot use windows path when viewing pages through server
But if still want to load local files, there are workarounds for every browsers.
For chrome: google allow file access
Example:
Lets assume this is your project path.
C:/Users/s003/Documents/Visual Studio 2013/Projects/Model/
looking at your image path, LOGO image is in the root folder of project i.e Model.
if your html file is also in the same directory, you just have to use
suppose your image file is inside images folder in model folder, then you have to use
and suppose you html file is inside some view folder in model folder, then (../ to go up one directory)
Related
I got this path for the image:
on my code, I got this :
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="../galery/logo.png" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div>
I still don't get the image, I don't know what is the problem
The file on your local drive is not a file on your web server. It is not enough to just put an image into the folder you need to create an endpoint on your server that will return an image by a specific GET request from the browser.
try to add to your APP.js
app.use("/galery", express.static(__dirname + "/galery"));
and change img url to following
<img src="/galery/logo.png" alt="logo">
I don't know which framework/language you are using. Anyway, Generally almost all language might have some common file to set/get global variables. Incase if your framework have such things. Try to set image path to gallary and use it in img tag's src attribute.
I have a menu component html (src/menu/menucomponent) that exhibits images from a folder (src/assets/images/image.png) for the main nav when being viewed on a computer. Then I have a sidenav that is shown when on a mobile device.
The code is :
<div id='main'>
<span class="hamburger" *ngIf="isMobile" (click)="openNav()">☰</span>
These images appear both locally and globally. Then I have the following:
<div id='mySidenav' class='sidenav'*ngIf="isMobile">
×
<a href=".#/welcome" >Home</a>
<a href=".#/aboutme" >About Me</a>
<a href=".#/projects" >Projects</a>
<a href=".#/contactme" >Contact</a>
Subscribe
<img src="../assets/images/Image1.png">
<img src="../assets/images/Image2.png">
<img src="../assets/images/Image3.png">
<img src="../assets/images/Image4.png" >
These images appear locally but once hosted on a server, do not show, but the links still work. I have double-checked that they are in the same images folder and that they are the right image names.
Does anyone have some ideas?
The assets folder is copied to the dist when you compile the app.
So, you change your sources to:
<img src="./assets/images/Image1.png">
The ng serve can still figure out where the files are when you are testing locally.
I am currently teaching myself HTML & CSS, I have bought many books online (hardly read) and I am running into more and more problems. Luckily I have StackOverflow and since you guys helped me out with my last question I thought I should come back and ask another.
All this troubleshooting makes it harder to actually achieve my goal but I am in it for the long run.
I try to write code for at least 2 hours a day while watching tutorials at night. That's my schedule. Once I become more confident in what I am doing then I will put more hours into it.
It's hard to get into the learning process in the beginning, but I know if I keep working hard then anything is possible
So let's solve this,
Thank You!!!!
Youtube Tutorial
timestamp reference 10:00 - 12:00
Screenshot of Icon
Code:
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="/gooch/assets/pics/Logo.png"><img src="/gooch/assets/ illustrator/1.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
I wanted my logo to appear inside the Navbar.
It could just be a syntactically error in the html? There seems to be a space in your src attribute. If that doesn’t fix it, there is probably an issue in your stylesheet.
Lack reputation to comment so will say it here.
Try to use developer tool of your browser to see the error about your icon
https://i.stack.imgur.com/o5kvH.png
then head to "Console" tab
https://i.stack.imgur.com/2dhWE.png
you can see here if the image file is missing.
I'm building a website.
http://olympiandiamonds.worldwidejamie.com
As I was building the site and uploading files, the site logo suddenly stopped displaying. I don't get any errors in the console as if it's not finding the image or suggesting there might be a permission error.
The image just isn't displaying.
Here is my code:
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottomNav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/Olympian_Faceted.png" alt="Olympian Logo" /></a>
</div>
It's a pretty straightforward bootstrap site and any of the topics I've found are mentioning a path being wrong or the image not being uploaded to the server. I've checked both of those and I can't seem to solve why the image won't display.
Check at least following things
You are using img/Olympian_Faceted.png as source. Is it same name on servers?
Try renaming the file
Try JPEG instead of PNG
Because, image is not showing if I open it in browser http://olympiandiamonds.worldwidejamie.com/img/Olympian_Faceted.png
I am not able set the jumbotron background image from my external stylesheet file, although the styling works inline.
The stylesheet link can be found between the head tags and after the bootstrap link. I've been working on this a couple days with no success, can this be accomplished?
Here is what I have so far:
CSS:
.jumbotron {
background: url('img/rocket.png');
background-repeat:no-repeat;
background-color: #28b8f7;
color: #fff;
border-top: 1px solid #005D85;
border-bottom: 1px solid #005D85;
}
Here's the HTML:
<!-- Jumbotron & Call to Action -->
<div class="jumbotron">
<div class="container">
<h1 class="text-right"></h1>
<div class="col-sm-6 col-sm-offset-6">
<p class="pull-right"><br />
<a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>
</div>
</div>
</div>
Although, this code seems to work as compared what I have already tried:
<!-- Jumbotron & Call to Action -->
<div class="jumbotron" style="background: url('img/rocket.png');background-repeat:no-repeat;background-color:#28b8f7;">
<div class="container">
<h1 class="text-right"></h1>
<div class="col-sm-6 col-sm-offset-6">
<p class="pull-right"><br />
<a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>
</div>
</div>
</div>
From the looks of your last comment, it is simply a case of your url being wrong for the location you are currently in. From what I gather, this is your basic structure
-index.html
-css (folder)
--style.css
-img (folder)
--rocket.png
You have defined in your style.css the following property
background: url('img/rocket.png');
Since your css is in a folder called 'css' under root, when the browser looks at your url it will resolve it relative to its current location, so it will end up requesting http://yourgreatsite.com/css/img/rocket.png. This is why it worked when you put it directly in your html, since it was resolving the url relative to its currently location, which was the root, so it ended up requesting http://yourgreatsite.com/img/rocket.png.
It's very simple to solve, use dots to tell the browser to navigate 'up' out of your css folder and then into your image folder.
background: url('../img/rocket.png');
This would have been really obvious if you used your browsers built in developer tools. Most modern browsers have some Developer tools or 'Inspectors' available. Open one of these and you'll generally find a panel called 'Net' or 'Network' or 'Requests'. This will list every request your web page is making, internally or externally, and highlight any that have gone wrong. In this case it would have shown the request for your background image returning a '404 file not found' and showed you the url it was attempting to use. Learn to use the developer tools, they'll make your life a lot easier!