Display or link an image from a remote server without HTTP - html

Need to be able to either use a link or display an image off a remote server that does not allow access over HTTP.
For example, I can type file://remoteserver/path/to/img.jpg in my address bar and the image will display, but none of these work:
<img src="//remoteserver/path/to/img.jpg" />
<img src="file://remoteserver/path/to/img.jpg" />
<a href="//remoteserver/path/to/img.jpg" />
<a href="file://remoteserver/path/to/img.jpg" />
Currently I have to just output file://remoteserver/path/to/img.jpg and have the user copy/paste into the address bar which is pretty bad. Preferably a cross-browser solution, but anything is better than what I have. Any suggestions?

Related

Not able to include image in html using relative path

i have a porlet running in liferay portal.after successfully entering the details , i want to download the details in an html page , in which i have to include an image.
this is done by giving the absolute path as:
<img src="http://localhost:8080/Demo-portlet/images/logo-1.jpg"
and it works fine.
My portlet structure is :
Demo-portlet-->docroot-->images-->logo-1.jpg
Now i want to do this by using relative path. i tried as below but it didnt work out:
<img src="../Demo-portlet/docroot/images/logo-1.jpg" />
<img src="./docroot/images/logo-1.jpg" />
<img src="./images/logo-1.jpg" />
None of the above worked. please tell me how this can be done.
Adding the html path:
Demo-portlet-->docroot-->download.html
Try this:
<img src="images/logo-1.jpg" />
Your portlet can be embedded on random pages. It's the page's URL that you need to be relative to, not the portlet.
If you have your portlet on http://localhost:8080/web/guest/home or http://localhost:8080/web/guest/about-us/contact/addresses, the relative address would need to be different. Thus I'd recommend to be relative with regards to the server name, but not with regard to the embedding URL: At development time you have no clue what name the pages that embed your portlet will have.
Go with <img src="/Demo-portlet/images/logo-1.jpg" /> or look up the servlet context (e.g. replace "/Demo-Portlet" with a dynamic value, so that you don't have to hard-code it).
(sorry, IDE not running and I'm always mixing up if it's request.getServletContext() or something else - try for yourself and comment here, I'll edit this answer when you give the full code). The dynamic stuff - on a jsp - would be <img src="<%=request.getServletContext()%>/images/logo-1.jpg" />

Html links don't work with localhost?

Is this true? I'm working on an mvc3 application in visual studio and I want the image I'm using as the header to be a link back to the home page, but since I'm just running it locally I'm using this line as the code:
<a href="localhost:60060">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
This doesn't work though! am I doing something wrong, or is it just that localhosts can't be used as this?
I also just tried using a javascript method as the href to refresh the page, but that didn't work either :(
Since links by default start at the domain, there is no reason to specify it. You can just use /.
<a href="/">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
HTML links work just fine with localhost:
<a href="http://localhost:60060/">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
The issue here is that just using localhost:60060 attempts to use a relative path, so the browser is actually looking for http://localhost:60060/localhost:60060/, which, of course, is an invalid path.
Also, you should not use absolute paths when linking between pages of your application, because that becomes a nightmare when you need to change domain names (like, deploying your application to the web).
To make your code more MVC friendly, do this:
<a href="#Url.Action("Index", "Home")">
<img src="#Url.Content("~/Content/images/LionLabs.png")" alt="Lion logo">
</a>
What's happening here is that the ASP.NET MVC Url helper is supplying the proper path information when the page is served out to the user, so it automatically accommodates any changes in the server. It also allows you to use your Routes to best effect, because you can easily change the route (ie the URL) of a link but still use the same controller and view.
The links for <a href=""> don't differ from the links for <img src=""> .
You shouldn't use absolute path, because, when you deploy your project, the site name will not be localhost:60060.
For main page use
Change this:
<a href="localhost:60060">
<img src="../../Content/images/LionLabs.png" alt="Lion logo">
</a>
To this:
<a href="#Url.Action("Index", "Home")">
<img src="#Url.Content("~/Content/images/LionLabs.png")" alt="Lion logo">
</a>
Why?
It's better to use #Url.Action as that will use any custom routing you set in Global.asax. Can you imagine modifying every single link reference on a complex site if you have to change your url routing? :)
Use #Url.Content, as that will correctly resolve to the root of your application, taking away the uncertainty of using ../ or ../../ or ../../... It's cleaner!
You have used href as localhost:60060. It should be a page (may be default.html or something like that).

How can I make hyperlinks 'portable' from machine to machine instead of hard-coded?

I have a simple HTML page and it contains links to pictures and other HTML pages.
I put the webpage on a memory USB. When I insert the memory USB to another PC, I need to change their path in the file.
How could I do that automatically?
Thank you!
If you use relative paths, no adjustments will be necessary.
Update the html to use relative paths rather than absolute paths
i.e.
<img src="~/images/image1.png" alt="" />
Home Page
rather than
<img src="http://www.mysite.com/images/image1.png" alt="" />
<a href="http://www.mysite.com/images/image1.png" alt="" />
[Note - the squiggly '~' means home directory.
If the web site lives in /this/place and images and in /this/place/images then you use 'images/filename.jpg' - no leading '/'] Michael Durrant.

proper way to write your links for use on multiple domains

If I have multiple domains all pointing to the same website, how are you supposed to write your links so they do not break when used via a different domain, .e.g
Imagine I have the following domains for the same website
oshirowanen.com
oshiro_wanen.com
osh.i.ro.wa.nen.com
if I had a html link as follows
<img src="http://www.oshirowanen.com/images/me.jpg" />
That would only be displayed if users went to oshirowanen.com.
How should that img tag be done properly so it works on all 3 domains?
Just
<img src="/images/me.jpg" />
Like this: <img src="/images/me.jpg" />, the src is from the root of whatever domain that page is accessed from.
If all your domains point to the same index, then you can just use relative paths
<img src="images/me.jpg"/>

loading the same image repeatedly

I have a page in the cms part of my website (javascript is enabled and can force a browser choice), it is a calendar with lots of images:
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
the same image can be used over 250 times, with about 1000-1500 images on the page.
Is the browser smart enough to figure out that these are all the same image, or is there some JavaScript/jQuery trickery that I can use to improve performance?
I think there is a subtlety to the question that has not been addressed. It's the same image on the same page. #Alex's answer is more appropriate for case of the same image across multiple pages.
When you are loading multiple copies of the same image within one page, the browser shouldn't care about cache/expiry headers. It should just re-use the image it loaded.
For this DOM fragment:
<img src='1.gif' />
<img src='1.gif' />
Looking at the network tab in Chrome, Firefox or IE9, you can see that there is only one call to the server by the browser. If the image has expired then the image is returned otherwise you'll get a 304 Not modified.
In short there should be no overhead from having a hundred copies of the same image on the same page, and the expiry headers don't matter.
If they have the same real path, then the browser will cache them, unless you have aggressive anti cache headers, such as expiry headers in the past.