Browser is loading assets on server from absolute path instead of relative - html

Situation
Recently I started a photo gallery on my server — https://mailo.svetel.cz/photos.
This gallery is generated by gem (third-party plugin). All the photo assets are located in /photos. In HTML the image assets are referenced via relative path
The strange part is, browser (Safari and Firefox) is loading it as if the path is absolute.
Pretty logically server responds with 404, because there is asset https://mailo.svetel.cz/photos/po_tydnu_venku/thumbs/DSC2433.jpg, but the browser is asking for https://mailo.svetel.cz/po_tydnu_venku/thumbs/DSC2433.jpg .
Before uploading, I did test the page in same browsers and the same code works locally.
Questions
Why does browser think I am giving him absolute path?
Do I need to configure something special for relative addresses when using HTTPS?
Do I need to configure some header in nginx to use relative addresses?

The root path for https://mailo.svetel.cz/photos is https://mailo.svetel.cz/
To make the browser see /photos as a folder, you need to add the directory separator at the end: https://mailo.svetel.cz/photos/

Related

Make browser treat locally stored folder like a site root?

Is there a way, without setting up a web server, to make Firefox or Chrome treat a locally stored site's root as it would be if viewed on the web?
So that when an HTML file is opened that contains URLs beginning with /
<link rel="stylesheet" href="/css/style.css">
instead of the browser searching for
file:///Users/me/Documents/Websites/Site/httpdocs/css/style.css
...and finding nothing, it would instead look for the file relative to httpdocs (because the browser was instructed to), and therefor find style.css?
When building a site that has root path URLs it's annoying that I can't view the pages in my browser without copying the whole site to the computer's root folder. All CSS, images, and scripts are not found because they are being searched for in my local machine's root. The URLs should remain as root paths however, because that will be "correct" once the site goes online.
Setting up a web server just for this purpose, on projects where I don't need it for anything else (when PHP and the like are not needed), is inconvenient.
Is there perhaps a setting or add-on that can be used to make a browser treat a specific site root folder stored locally as if it were hosted on the web? Thanks.

HTML file behaves different in dirrerent servers

My first assignment in web programming class is to design a website without browser side and server side script.
I made an HTML 5 document, linked to a CSS file, all of them were validated in W3C validator, everything is good. I test the web page locally on my laptop on Chrome36, Firefox30 and IE11, all good.
But I'm required to upload it to University's server, all good in Chrome and firefox but IE, however I tried to put it on the server on my laptop and access it on IE from University's PC, it behaves all good.
Apache server on my laptop, access from Uni's PC
On Uni's server, access from Uni's PC
My lecturer says I'll lose mark if it behaves so, what could be the problem and how can I solve it? Do server settings affect html's behave? Thanks!
Also, if you want, you can access it via deakin.edu.au/~yshengk/a1
Maybe the html file can't see your css? Check file path's.
The only change I would see is the file and folder path looks different. Check whether you have used correct file/folder path. Try changing the CSS, JS, images folder path between relative folder path or absolute folder path.

using / to indicate root directory

This is probably a stupid question, but its hard to search for effectively. I am have defined the following:
<img src='/images/image_name.ico' />
This properly creates the path to the root directory then the images directory in all of the browsers I have tested, including IE10, but IE9 will not get the path right. Is there a known problem with using / to indicate the site root with IE 9? I just get a broken image even though the file exists at that path.
No. There are no known issues with IE's ability to resolve root relative URIs.
The usual debug steps you should take are: Check your server logs and browser debug tools to see what is actually being requested, if the request was successful, and if the correct content-type is being specified. Make sure the image file is OK. Check the browser can resolve the URL and open the image directly (without going through a webpage).

image is not showing on html page

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.

unable to display image in client machine

I have a web application.
I have inserted an image into my web application homepage using html tags.It is working very well in server machine. But when any client is accessing my web page everything that is present in the homepage of the web application is displayed except the image. Instead of image cross mark is displayed in client machine.
Can anybody help me how to display the image in client machine.
Check the path in the src attribute in the img tag. Make sure it's a relative path, and not hard coded to path on your hard drive.