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..
Related
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.
I have a quite specific IE9 problem that relates to this for example (but here it only refers to IE8 and less) IE8 web font iframe bug workarounds
I have pages that have iFrames inside iframes like so
Top page
-- iframe1.html
-- -- iframe2.html
-- -- -- iframe3.html
The iframe 2 is loaded by iframe1 dynamically. I also have a fonts.css style sheet that has fonts encoded in this way:
src:url(data:font/opentype;base64, /*FONT HERE */
that is located next to iframe1's folder in
/%folder_with_top_page%/%folder with iframe1.html%/style/fonts.css
iframe2.html loads the fonts.css file from that folder:
<link rel="stylesheet" type="text/css" href="../style/fonts.css" />
And this works with other browsers just fine, except in IE9 the result is following:
page loads
page flashes with correct fonts
page reverts to New Times Roman/default serif font
Looking at the Network tab in dev tools in IE9 it shows that the browser is trying to load the fonts file from the root folder:
404 %folder_with_top_page%/style/fonts.css
Everything works just fine if I also place the fonts.css file there, but that seems unnecessary. There is also a file called fonts.css in %folder_with_iframe3.html%/style/fonts.css, which loads fine and seems to relate to the problem described in the first link, but I assumed the problem was fixed in >IE9? I know that the page structure isn't optimal in any case, but it's not up to me to change it.
My questions are as follows:
1) Is this the same problem as described in the link I posted but in IE9 instead?
2) Which would be the workaround that makes the most sense: just inserting the fonts file to the "correct" (= wrong, root-ish) folder, putting the fonts.css file to the same level as the file thats loading it (aka copying the file to %folder_with_iframe2.html%/style/fonts.css) or something else (such as appending the CSS again to the page with jQuery after the site has loaded).
The behaviour only happens with iframes but not when loading the pages individually.
I just stumbled on this post while diagnosing a similar issue with an embedded iframe trying to load a stylesheet with a relative link, and the request going to the outer page. To solve it, I appended the link tag to the DOM, then set the href attribute with JS.
var cssLink = "<link rel='stylesheet' type='text/css' id='addcss'/>";
$('head').append(cssLink);
$('#addcss').attr('href', src);
I was able to reproduce the issue consistently when including the href in the initial tag, and was unable to reproduce it after implementing this fix.
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).
Ok.
So I know this is probably a stupid question, but I've been traversing SO and Google for the last many hours for an answer and found nothing.
I'm currently creating a HTML5 mobile app using JQM 1.2.0 and Google Maps js V3 - just to set the context.
My problem occurs when I try to test the page in FF 18 desktop version. In every other browser, be it mobile or desktop, I'm not having any problems. Also, I have tried on both localhost as well as the server I'm deploying to, and it's the same result.
In my HTML file I have a relative link to css and js files:
<script src="js/general.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/mobile.css"/>
while my links to JQM etc. are absolute as I use a CDN:
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
When I use Firebug, I can see that the files with a absolute path are loaded fine, while the relative path links are ignored - or at least I think so, as nothing shows up in neither the Console or the Net pane.
When I check the Html pane in Firebug, it appears as if it has included a tag pr default (with the correct URL), but not if I try to view page source using the regular FF methods. Even though, I have tried to include a explicit base tag to my header and it changes nothing.
So, to sum up: relative path works fine in all browsers except FF, it it happens on both my server and localhost.
Update:
Tried moving the files to the root dir, but it didn't help.
Also, when trying to view the content of the js or css file in Firebug (pressing the arrow to the left of the tag in index.html), it just says:
Reload the page to get source for: http://localhost/~u040800/app/general.js
which, of course does not change after reload.
Nevermind - stupid mistake on my side!!
Note to self: when developing, do make sure that your add-ons are disabled before asking SO! otherwise, you make a complete ass of yourself!!
Yes, it is correct - I forgot to disable Ad-Blocker...
#robertc: Sorry to have wasted your time.
hi i m not able to load an image in chrome using img src="E:\pic1.jpeg" when i run this code in internet explorer its working bt not in chrome . on the other hand when i give the name of image instead of path in src then its working ...
plz help ... regards Prabjot
Chrome probably doesn't handle file system paths (or at least not without using file://). Even if this did work, that link would only work on your local machine as the person browsing your website wouldn't have an image at that location.
You should be using URLs for your resources (i.e. images), not file paths.
Have you tried using file:// to prefix your image local path?