I have made a picture link with this code snip:
<a href='feed.php'><img src="C:\xampp\htdocs\Project\Icons\Feed.png"/></a>
But no picture appears on my page, why?
(I'm currently only using my page locally!)
It's because you (are trying to) use a local file reference.
Either use the relative path
or
<a href='feed.php'><img src="file:///C:/xampp/htdocs/Project/Icons/Feed.png"/></a>
Please be aware that if you plan to use this 'online' it will fail because of the LOCAL reference.
If you load the page through your webserver you should use:
<a href='feed.php'><img src="/Icons/Feed.png"/></a>
Or
<a href='feed.php'><img src="http://yoursite.local/Icons/Feed.png"/></a>
Or whatever the path to the image is.
I would prefer the relative path (the first) though which enables you to move your page to another domain without your links / images breaking.
You can't link local files from a remote web page. This is to prevent webpages from accessing files on the end-user's computer.
Change this: C:\xampp\htdocs\Project\Icons\Feed.png
To this: http://yourwebsitehere.com/Project/Icons/Feed.png
EDIT: Since you say its only used locally, then you need to use this instead:
file:///C:/xampp/htdocs/Project/Icons/Feed.png
Also, make sure the image is actually located where you think it is!
Try typing file:///C:/xampp/htdocs/Project/Icons/Feed.png into your browser's address bar and see what happens.
Related
I have an html file in which I would like to display an image called plot.png with the line <img src="plot.png" alt="Stock price vs. predictions graph">. On my website, I only see the alt text, meaning that my image did not load properly. In my command prompt output I see that I have a get request to /mysite/home/AAPL/plot.png, which is extremely frustrating because this means that when I search for the image this code is just placing it in the url (which is localhost../mysite/home/AAPL). I have tried putting plot.png in the same working directory as my html file as well as trying the absolute path to plot.png starting with C:, but nothing seems to get the search out of the url. Please help, thanks!
If it helps, im using Django
You can put the image in the same working directory (in the same folder as your html file) and then use
<img src="./plot.png" alt="Stock price vs. predictions graph">
The "./" is important as it signals that the image is in the current folder.
You could also use a website like www.linkpicture.com to generate a link to host your image and then use that link in your img
Some web browsers automatically disable images from loading. Fixing this could be as simple as selecting “show all images” from the browser's settings menu. It's also worth checking if the device you're using has security software or extensions that could block images.
Again you can use this tag for .png type photo
<img src="exampel.end">
//use extension type .end instead of .png
I forgot to mention that I was using the Django framework and the html templates work much differently than regular html files do. In Django you must put the image in a static folder and then call if with Jinja like so: <img src="{% static 'mysite/image.PNG' %}">
The element is selected properly because other properties apply. There are no console errors.
I have tried:
img/hero.jpg - works when I click on link in VS Code
/img/hero.jpg - works when I click
../../hero.jpg - work when I click
../img/hero.jpg - doesn't work
the full path - works when I click
The problem is seen here. You can see that images called by the src attribute work.
Here is the file structure.
I honestly don't understand your setup / question, but I think if you understand how relative URLs work a little better you can figure it out yourself.
On your server you have your files in somewhere like,
/var/www/html/index.html
/var/www/html/css/styles.css
/var/www/html/img/background.png
On your computer you have your files somewhere like,
C:\Users\Nani\Desktop\Website\index.html
C:\Users\Nani\Desktop\Website\css\styles.css
C:\Users\Nani\Desktop\Website\img\background.png
And in your styles.css you have something like this,
body {
background-image: url('/img/background.png');
}
Starting the URL with / tells the browser to interpret it as the root directory. On a Windows PC it will be C:\ and on a Linux PC it'll be /.
However, when you access the page once it is online from a url like https://example.com, the root directory becomes https://example.com/.
Therefore, using /img/background.png will make it look for the image at https://example.com/img/background.png once it is online, but on your local machine it'll be looking for the image at C:\img\background.png
Starting the url without the slash like this, img/background.png looks for the image relative to the folder that the css file is in. So in that case online it'll look for the background here at https://example.com/css/img/background.png and on your local machine it'll look in C:\Users\Nani\Desktop\Website\css\img\background.png
In my example, the best solution would be to use ../img/background.png, that'll look up one directory relative to the css folder, and then in the img folder. That'll work consistently on both your own computer and once it is uploaded.
That should be enough to figure out what you need to do assuming that the problem is the way the url path is declared. Otherwise, the problem might be with something else. For example, it seems like you're using SCSS. Perhaps the SCSS isn't compiled on your local machine (or hasn't been in a while), but it is compiled on the live server?
It works on live server because its settings make location of index.html a root of your document (/). When you open index.html directly your root is different and images aren't loaded from correct location if you start the path with /.
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.
I had the same problem and it turns out that I wrote the path wrongly. You have to write the url based on where the css file is, not where the index file is. Because the one that reads the url is the css file. So it should look like this:
body {background-image: url('../img/background.png');}
Because your CSS and your IMG are in different folders.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
How would you proceed to add a picture to a website (in html or css) from your own computer?
I know how to add a picture using a url but what if the picture is stored in a folder on my computer and not on the internet?
<img src="path/to/image/image.png">
You only have to give the location of the image, use as reference the .html location.
Exs.:
<img src="image.png">
if your image is in the same folder of your html file.
<img src="../image.png">
if your image is outside of folder where your html file is and so on.
When you do that, you are going to be the only one able to access your page. If you want other people to see it you should be stored in a public folder in your web server. Look for XAMPP if you are a windows user.
If the website is hosted on your computer then you can use your images stored on your computer.You can use <img> html tag to display image.
Otherwise if it is on some remote server, then you will need a static ip and a server on your computer to host images to remote server. It is not possible to have have server on remote internet location and images on local.
If website is on internet then copy the image to server and provide path.
You can using the img tag to do this
https://jsfiddle.net/moongod101/dh55b4rz/
PS: I'm the creator of Codepenimg
Let’s pretend we have an image of a car on our computer saved as “funny-dog.jpg” and we want to insert it into a webpage; this is the code we would use:
<img src="funny-dog.jpg">
Let’s analyze this code. First, is the code for creating an image element. Next, the letters “src” are used as an attribute and stand for “source”. Basically, we need to provide the web browser with a value to the source of the image. Naturally, the value for the source attribute is “funny-dog.jpg”. This example assumes your image file is located in the same directory as your HTML file. If, for example, you had your image file inside a folder named “images” your code would look like this:
<img src="images/funny-dog.jpg">
There is one additional bit of code we must add before we are finished. We must assign an “alt” attribute and value to our image. The “alt” attribute stands for “alternative” and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:
<img src="funny-dog.jpg" alt="A funny dog sitting on the grass.">
I am currently designing a small website using JSP / Servlets. Tomcat is very picky about my routes.
My application can be entered throught the path /Final (on a localhost I have http://localhost:8088/Final).
My main JSP page is at http://localhost:8088/index.jsp. On that page, I have a navbar with several links. On one of those links, the "Home" link, I have the href set to /Final/index.jsp. When I hover over the link, it shows the links path as http://localhost:8088/Final/Final/index.jsp.
At first, I said ok, lets just change the href to index.jsp, but when I do that, the link now points to http://localhost:8088/index.jsp which will not satisfy the server. Why are links behaving like this? How can I get it to point to http://localhost:8088/Final/index.jsp without fully qualifying it?
You could use a relative path such as pointing it directly to it's location. I'm not sure if this would work, but try putting /index.jsp as the href in your link. This way it's going from your current folder "Final" and going one level down to index.jsp.
Apparently, adding the . before the path as in ./index.jsp works just fine.
Also, you can try to escape your file and specify it again, it worked for me.
For example: ../jsp/index.html