I'm making a Chrome App and need to package images with the app, so they will not be served by an external server. I'm attempting to load local svg files, but in Chrome (Version 40.0.2214.111 m) in all my efforts to display the svgs keep getting the error Resource interpreted as Image but transferred with MIME type application/svg
Ideally I am trying to find a way to load local svgs in <img> tags. Is there a way to do this locally? I understand that svgs that are served contain proper headers telling Chrome how to display svgs in img tags, but I cannot get this to work with locally stored svgs.
Please don't suggest using pngs unless you know that is the only solution. I must be missing something obvious.
This problem I had with the fonts, the way in which I decided was to use:
src: url(data:application/x-font-woff; base64,/*..file data...*/)
In your case, try a method of using SVG files in local mode
Related
I know how to embed images in a web page inline. That's not my question.
My question is for a web page that has images included the normal way, as links to a distinct jpg file, how can I save it where it creates a single html file where the images are converted to embedded images inline in the html?
You can use SingleFile for this (I'm the author). It can be run as an extension or from the command line, more info here: https://github.com/gildas-lormeau/SingleFile.
Not a direct answer, but you may consider the MHTML format (https://en.wikipedia.org/wiki/MHTML), supported natively by IE, but also available in other browsers via plugins.
So ive been through several posts and searches, but im still at a loss for how to get Chrome to display images when the src attribute uses a file thats located on another server. Im getting the image and setting its path via a custom file browser that Im hooking into CKeditor with. Works fine in IE, just not chrome.
This is for an intranet, and some of the image content is stored off of the web server. Although IE displays fine, it seems that Chrome does not like to display images with the src attribute is of a format like
file://server_name/share_name/folder_1/file_1.png
Strange, even though Chrome will pass the users identity, so its not a security issue. Also, if I take the path and directly paste it in the url window of Chrome, it displays fine. Just not when a img src value.
If this was just a page on its own, I could use a custom handler and write to the response stream, but this needs to work with a content editor.
Id like to include Chrome since many of our users have it and use it daily, but our default is IE.
Are there any file url schemes, or Chrome settings that will override these issues?
The issue may not be the image or URL format. I'd wager that it's browser security restrictions.
To ensure that maliciously designed web pages can't access a user's local files, accessing any data from the user's filesystem (especially network drives) is generally disallowed in most modern browsers. (At least in their default configuration. There may be policies or runtime parameters to override these for testing purposes such as Chrome's --disable-web-security parameter, but these are purposefully difficult to turn off.)
If you want the content to display across all browsers, you'll likely need to deliver it via HTTP(s) like the rest of the page content.
I downloaded Font Awesome today and did it a try. In firefox and chrome (latest versions) it appears as blank squares. If a use the CDN link, it doesnt even work, the standard bullets appear instead of the blank squares. But in codepen.io, it just worked fine, using the CDN.
The html i used is just the same as the example of the lists, which is here: http://codepen.io/pietrofxq/pen/BCaoD
Does someone knows the problem?
You are using a schemaless URL to access the CDN.
If you are trying to open the page from your disk (schema being file://) then it will fail is it will use the same schema to access the CDN
Try with a full URL http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
If you are calling it from a server, then make sure that the font files are delivered correctly. Some servers need to be told to allow the font files to be accessed.
(use the console to see if they load ok)
I have a wordpress site here http://itrain.com.my/v3/ as my Home Page
I am wondering why it is not displaying well in Firefox?
Anyone who is good in css?
By the way, try to look at the subpages http://www.itrain.com.my/v3/index.php/about-us/
it display well.
I am really wondering why does it happening.
Any can help me? Any suggestion, recommendations?
I think problem is with URL.
It work http://www.itrain.com.my/v3/ but doesnt work on http://itrain.com.my/v3/
Set on your server redirection (301) from non-www URL to www URL.
I would wager you have the font installed on your local machine. I don't see it on any browser. Instead, I get two 404 errors.
In other words: please make sure the font files are available at the locations their respective locations: http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/big_noodle_titling-webfont.woff and http://www.itrain.com.my/v3/wp-content/themes/itrain/img/fonts/bebas__-webfont.woff.
[EDIT]
I've just looked at the fonts directory listing on your site. The ttf and eot versionf of your fonts are available, the woff and svg are listed, but result in a 404 error. Furthermore, the ttf version (downloaded instead of woff in Firefox, after getting a 404) seems to generate an empty HTTP response.
So... Make sure the fonts are there, make sure they have proper privileges set (like 0644). I can't see any other issues than the font files themselves as the CSS appears to be correct.
[EDIT 2]
#kubedan provides a great tip that seems to fit your concern about the htaccess: the domain the fonts are downloaded from is always preceded with www. Firefox will refuse to download such content, you need to use the same domain.
In which case webpage loads without external stylesheet in chrome or safari ?
I am talking about a case in which webbrowser first loads webpage without stylesheet and then redraw it with css once it becomes available.
It would be great If you give me a small html page with external stylesheet, which always loads webpage without external stylesheet.
I am a webkit developer and want that case to do some development in webkit engine.
I believe that this is always the case. In other words, CSS files are always loaded asynchronously, and when they become available they are stored in the broser and applied to the existing DOM.
If you are interested in slow loading files, you can simulate this and see how your browser behaves. Best way is the following: get yourself a php and apache installation (say XAMPP), instruct Apache to handle .css files as php files (i.e. execute php code in css files), create a new css file and at its to add <? sleep(20); ?>. This will cause the css file to be delayed by 20 seconds, effectively simulating the slowloading.
Other than that, you could also wish to load a CSS file after the page is already loaded. Here you can find an example: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/