I dont know why my image url doesn't work - html

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.

Related

Can't load PNG file in HTML

Hello I have a problem with add logo to my website. Firstly I had some example logo
<a class="navbar-brand d-flex align-items-center" href="/">
<a class="navbar-brand" href="#"><img src="img/cattery/logo-cattery.png" width="250"height="70" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>
And everything was good.
Secondly I bought some logo on logo creator website and now there is a problem with my logo. There is 404 error. I use the same code and localization but another file- the file seems good, I can open it and I can see the content.
My new code:
<a class="navbar-brand d-flex align-items-center" href="/">
<a class="navbar-brand" href="#"><img src="img/cattery/cattery_logo.png" width="250"height="70" class="d-inline-block mr-1 align-bottom" alt=""></a>
</a>
I tried various files from my logo package and I changed localization etc but unfortunatelly I haven't got it.
A 404 error usually indicates that a resource can not be found. Are you completely sure that the path is 100% correct?
Another cause of error could be that (actually both paths) img/cattery/cattery_logo.png is a relative path, hence the actual path called depends on the currently opened site. Consider changing the path to absolute: /img/....

HTML: Not downloading file on click

I wish to download excel file on click/trigger:
<a href="/download/test.xlsx" download>
<button id = 'download' type="button" class="btn btn-outline-info" onclick="">
Download File
</button>
</a>
This while clicking is failing as it is trying to go to "file:///C:/download/test.xlsx".
What is wrong here?
You code is correct except the file file path.
You need to have the file in the same folder in which you have your html file.
So if the files name is some_text.txt which is in the same folder, then use the following code:
<a href="some_text.txt" download>
<button id = 'download' type="button" onclick="">
Download File
</button>
</a>
It worked for me, it will also work for you.
You could also try replacing it with images also.
For more check this link: https://www.w3schools.com/howto/howto_html_download_link.asp

Why is my Navbar Icon not appearing on my website?

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.

Can not see logo in navbar

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)

An image with proper permissions and correctly linked disappeared from my site

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