Reference local file image file in HTML - html

I am looking for suggestions on how to reference a local image file in HTML. The HTML code will only ever be used locally and never be published on a network of any type. I find that this code
<img src="file://l:/Test FFHP data/1042545.tif">
works well in Internet Explorer and Edge. It does not work at all with Chrome or FireFox.
Please give me some direction. I am hoping my users will be able to use their preferred browser.

Related

Getting a fakepath when trying to upload a cv

I'm trying to upload my resume to a company's website and I'm getting a C:\fakepath\myfilename,
Does this means that my file can't be uploaded to the website? or is it just for security reasons?
(I tried uploading with Microsoft Edge and Chrome)
When a file is chosen using an <input type="file">, the real path to the source file is not shown in the input's value attribute for obvious security reasons. Instead, the filename is shown, with C:\fakepath\ appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is defined in the spec.
So, the browser shows the fake path for security reasons and it will not cause any issue with the file upload functionality. The file upload will work fine.
References:
Refer to the second point of the Notes section
FileUpload in Chrome giving some fake path value
FakePath issue in Chrome browser

IE Display Data URI

I'm currently using a solution which converts a pdf file to a data URI. The data URI is then set as an iframe's source and displays the pdf on almost every major browser, I have learned that IE 11 does not like this though. After reading up on it, i realize that iframes don't support data URI's as the source (nor do any elements other than an image URI) and that I can't set a source for an element so I'm unsure how I could achieve the same with Internet Explorer.
I've tried using an embed (learned that it doesn't like data URIs either), an iFrame, initiating a download in a new tab of the file itself (to mimick viewing a it in the browser - no avail) and I'm running out of ideas but unfortunately a lot of people still use Internet Explorer so I'd like to make it compatible. Is there any way to recreate this behavior in Internet Explorer like other browsers do?
Thanks in advance :)
I ended up giving up on this for lack of time to research/test. The final solution was just as well I suppose. I ended up writing the PDF to subdirectory in the website and then setting the source ofthe iframe to the download method of the file. Tad slower than my original implementation but it works for legacy purposes. When will IE die!

Issues on chrome showing an embedded PDF

I have the following code in a html document:
<p>PDF sample</p>
<object data="http://www.whateverdomain.com/whatever/~/media/sample.pdf" type="application/pdf"></object>
This is working in IE, Firefox but not in Chrome. Appears a grey box in the browser with no embedded pdf. When I check on "network" tab in chrome I'm receiving a HTTP 200 response but PDF is not shown.
I tried URL encode tilde "~" symbol replacing it by %7e but still its not working on Chrome.
I don't have the possibility of changing the url which is provided by an external service.
Do you have any clue on how to solve ?
You might wish to try and use a simple iframe. At the very least I am pretty sure that works for chrome, might not work for IE though. Another alternative is using the Google Docs viewer, with that you are sure to be cross browser compatible, although some pdf's might not render perfectly. The last option you have is using something like pdf.js to render the pdf's yourself inside the browser. Gives you a lot of control and ensures that even people running computers without a pdf viewer installed (or a native pdf viewer like chrome and firefox) will be able to view the file.

Trying to use LiveReload, but in Safari 6.0 the extension icon is greyed out for local files

I'm trying to get LiveReload to work with a local website I'm coding for now, but it won't seem to work. On non-local pages, the extension icon is clickable and all, but for local files, it's not: http://i.imgur.com/qrMDo.png
Does it not work with local files? I have it added within the app. Or does it not work with ML? It works if I add the script to the HTML file, but I'd prefer not to.
It seems to me that it is a bug.
It was reported here. I have exactly the same problems in Safari.
Just use different browser, if you can. It works great in Firefox for me.

Mozilla unable to display images whereas IE does

Could anyone tell me why mozilla firefox unable to display the images where explorer can do? I even changed the extension with CAPs in all ways i can but not yet working. I have written a HTML file and my IE can open in the way i want but when i open my HTML file using the mozilla it is not displaying images but just leaving the image borders.
And also IE can reference to the CSS sheet path and making the changes but wheareas the mozilla its unable to link with css sheet path I have set the text color and font size in my css sheet and linked it with my html file. Its working perfect in IExplorer but not with the mozilla. I have been asking these thing How do i make a standard HTMl file that works on every browser And i got some answers from you but still I am unable to make it work .Can anyone tell me a good document to go through because no matter how i try its working on one browser and throwing the error on some other browser
Im giving it as src="d:\text\image.png"
If you are using absolute paths with drive letters, e.g. <img src="C:\www\images\foo.png" alt="foo">, it will work with Internet Explorer but not with Firefox. If you include drive-letters etc. in the path, the path becomes Windows specific, something that IE can understand but other browsers may not.
To fix the problem, you should use relative paths, e.g. <img src="images\foo.png" alt="foo">. The path should be relative to the HTML file where this code is present.
Most often, web pages are written to be hosted on web servers. Images are usually put under an 'images' directory inside the document root (web-root), say, /images/foo.png. Now, the home page at /index.html can include this image either using a relative path: <img src="images/foo.png" alt="foo"> or an absolute path (path from the document root): <img src="/images/foo.png" alt="foo">. Note the usage of forward-slash as opposed to back-slash. You should use forward-slash. Back-slash is very Windows specific and other browsers may not understand it.
The same applies for CSS or any other paths used in your HTML documents.
For me worked (for Mozilla Firefox v 26.0).
<img src="file///C:/User/MrBrown/www/images/foo.jpg">
Didn't worked:
<img src="C:\User\MrBrown\www\images\foo.jpg">
instead of specifying the path as src="d:\text\image.png"...
change the path as src="file:///D:/text/image.png"
if the folder name are having spaces.. then instead of spaces, write %20. or else open that image file in any of the web browser.. and copy the address from the address bar and paste that address as src path..
it will work for both Google chrome and firefox..