unable to display image in client machine - html

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.

Related

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

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/

ASP.NET - Images Not Loading Properly on Google Chrome/Firefox?

I am making a web application using ASP.NET and I noticed that only Internet Explorer loads images properly that are on my home computer (../Desktop/WebsiteImages/xxxx.jpg), whereas the images won't load on Chrome or Firefox. If I want the images to display on Google Chrome or Firefox, I have to upload the images on a web hosting site such as imgur instead of having them all on a file on my computer. Is this a known bug?
If I want the images to display on Google Chrome or Firefox, I have to
upload the images on a web hosting site such as imgur instead of
having them all on a file on my computer. Is this a known bug?
It is not a bug.
Web Server will never serve a file which is located outside of a web application (unless you create an image handler by yourself).
If you are new to web application, easiest way is to place images inside ~/images/ folder inside your ASP.Net application.
Then you can call the image like this -
<img src="#Url.Content("~/Images/MyImage.jpg")" alt="My Image"/>
showing local file like file:// is not allowed in Chrome and Firefox for security reasons by default, but this answer shows you how to change those settings. it's not recommended to use local filepath for your image

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.

How to use non-online images in CSS?

How do I use a non online picture (no www.sth.com/image) in my HTML (or in CSS) site?
Normally when I use a picture I do <img src="link of image"> but how do I use a picture that I have locally on my computer?
If, for example, your image is in the directory images/image.png, relative to the HTML file
You would use <img src="images/image.png" />. This will work both online and locally.
If you are accessing the page locally then use relative URLs
If you are hosting the page on a server and visiting it yourself, then you could try to use file:// scheme URIs but you might find yourself blocked by browser security restrictions (which don't allow webpages to fiddle with user's local disks). You'd be better off hosting the image over HTTP.
If you are hosting the page on a server and letting other people visit it, then you must host the image over HTTP. Your website visitors do not, and should not, be able to access your local hard disk.
You can just enter the path of the file on your computer for the src attribute.
For example, if your image is in C:/files/image.jpg, just use <img src="C:/files/image.jpg' /> and you can also use relative paths.
But, note that this only works on your local machine and will generate a 404 error on other machines that don't have the image in the exact same location.

WAMP - website display incorrectly

I apologize for my poor English since it's not my mother lang.
I'm a newbie in web development. When I open my HTML page by clicking index.html, everything shows up correctly in my browser. But when I open via [http://localhost/SOME_DIR/SOME_DIR/index.html], the browser only shows some [div] frames and plain text. My CSS style and pics are all missing.
In WAMP, I've checked the Localhost and phpinfo() pages, both OK.
Maybe I need to open certain Apache services?
I don't know where goes wrong.
<base href="C:/wamp/www/StrangeAttractor/" target="_blank">
should be
<base href="/StrangeAttractor/" target="_blank">
You are loading the site over HTTP but you are trying to set the <base href> to your local disk. There are two problems with this:
You are using a plain file path but you have to specify the scheme (file://) in order to switch protocol
Security restrictions limit what resources web pages served over the network are allowed to load from the local disk
The solution: Load all your content over HTTP.