I am new in Ubuntu, as well as using lampp, My problem is, after storing image in image folder of my apps, image is not showing in HTML file ( image not found ). localhost document root is /opt/lampp/htdocs/, and my root folder is f_21 if I use the following link
http://localhost/f_21/index.html // not works
But image showing works well if I use following link:
file:///opt/lampp/htdocs/f_21/index.html // but it works
Any idea ??
You should keep both image and index.html files under htdocs.
for you,place your index.html and image files under f_21 folder and update src attribute of img tag in your index.html
If the link to the image is an absolute path based on your file system with the file protocol, then you won't be able to load it when viewing the html page over http.
Chrome doesn't (I'm not sure about other browsers) allow loading local resources on a file requested with http.
If you're using chrome, you can press ctrl+shift+j to see the console, which will show any errors. You might see something like: Not allowed to load local resource.
The solution is to change the src of the image to be relative to the html page it's on.
Related
How does a browser know to open another html page inside the folder that our index.html is located?
We are opening only the file not all the folder right?
What i mean is how the browser fetches the files when we are not using a online url...
in my project images are not showing in chrome web browser but working properly in atom live server,
image location- \Documents\myapp\images
CSS folder location-\Documents\myapp\style.css
this is how i'm directing an image - background-image:url('../images/img1.jpeg');
Instead of
background-image:url('../images/img1.jpeg');
Use: background-image:url('images/img1.jpeg');
Your CSS file is in \Documents\myapp\style.css and image file inside \Documents\myapp\images, From CSS file you do not have to go back to parent folder using ../
Maybe a caching issue, try press F5 while holding shift button
I am trying to display a document in the browser using a html link which has this form :
filename.pdf
I already tried to use file:// , file:/// , file:\\ , and file:\\\ , but I always have the same error :
Not allowed to load local resource: file://...etc
The strange thing is that it is working on one computer (with google chrome) when the extention "LocalLinks" is installed but not on the others computers (with the same extention installed).
It is working on all computers when I directly paste the file path in the URL, the only problem is when using the link to open it.
I don't understand the issue.
Your Best bet would be to store it in a folder relative to the served HTML file. Because different Web Browser's use different protocols.
Here are some other more in depth answers:
How can I create a link to a local file on a locally-run web page?
GitHub won't load the images in my images folder. It loads the background image fine, and all the images load when I launch the page offline. I've made sure the images only begin with letters, and tried matching the image file names with the path names in the index.html file case sensitive-wise but still no luck.
website: http://rpboyer15.github.io/sounds-of-the-storm/
repo: https://github.com/rpboyer15/sounds-of-the-storm
Paths are case sensitive. For example in your repository, you have brightwing.jpg and in your HTML you have Brightwing.jpg which will result in a 404. If you use the Chrome Dev Tools and adjust the URL using Inspect Element and it will load properly.
PS: Heroes is an awesome game.
I am using the following code to show the image on the web-page.
<div float="right" width="30%">
<center><img src="jatinkhurana_image.jpg"/></center>
</div>
The above code is from an .html file. My image is also in the same directory in which the html file.
It's working fine when i am running the same when all the html file and image file is in my local directory.
Now I have uploaded all the files in ftp server.Everything else is working fine except it's not showing the image on webPage.
Things that I have tried...
I have logged on to that server and checked file is there or not.... file was there.
I have checked for the file name which is also right.
I don't know why this is not showing the image.
If anyone know, please help me !!!
Check your browser console an inspect that image element. When you find that image copy it's src attribute and paste it in new tab and check if you see the picture or not. If you do not see the picture you must have some broken link to the image, if you see the image in new tab disable all the extensions of your browser like ad-blocks etc and let me know.
EDIT:
Also check if that, that place is blank or the broken image shows up. ( Like chrome loads a tiny broken image if the url is wrong )