data-uri

Is embedding background image data into CSS as Base64 good or bad practice?

由 喜夏-厌秋 提交于 2019-12-17 01:22:29
问题 I was looking at the source of a greasemonkey userscript and noticed the following in their css: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} I can appreciate that a greasemonkey script would want to bundle anything it can within the source as opposed to host it on a server, that's obvious enough. But since

firefox hangs when displaying a pdf via data url

由 被刻印的时光 ゝ 提交于 2019-12-13 07:36:06
问题 I have an app which creates pdf in the browser using jspdf. I want to show this pdf in another tab/window. function open_data_uri_window(url) { var html = '<html>' + '<style>html, body { padding: 0; margin: 0; } iframe { width: 100%; height: 100%; border: 0;} </style>' + '<body>' + '<p>new viewer</p>' + '<iframe type="application/pdf" src="' + url + '"></iframe>' + '</body></html>'; var a = window.open("about:blank", "Zupfnoter"); a.document.write(html); a.document.close(); } It works fine in

Downloading json including newline characters via data uri

由 和自甴很熟 提交于 2019-12-13 05:31:10
问题 I have a web application in which I have generated a huge JSON. I now want the user to be able to download that JSON. Therefore, I use the following code: function saveJSON() { var data = JSON.parse(localStorage.getItem('result')); var jsonResult = []; for (i = 0; i < data.length; i++) { var item = expandJsonInJson(data[i]); lineToWrite = JSON.stringify(item, undefined, "\t").replace(/\n/g, "\r\n"); jsonResult.push(lineToWrite); } if (jsonResult.length != 0) { console.debug(jsonResult);

View an Image Using Django CreateView Before Submitting

由 这一生的挚爱 提交于 2019-12-13 03:26:43
问题 I have a Django CreateView that works as expected. I allow the user to attach a photo and then after they click Submit, the view captures the image as expected. However, I am trying to figure out if there is a way, using CreateView, to show the image that has been captured. As of right now, it shows the file name, but I am trying to get it to show the image instead. I tried a variation of this SO question, but it is not for CreateView and I can't figure out how to translate it. Render image

Data URI and a potentially dangerous Request.Path value

由 匆匆过客 提交于 2019-12-12 13:16:19
问题 I have tried using a Data URI with this CSS property: background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBg8AUIMAAAUgBOUWVeTwAAAABJRU5ErkJggg=="); And locally it works fine. However, when I am debugging the file appears missing in chrome. If I try to navigate to it, I get: A potentially dangerous Request.Path value was detected from the client (:). So obviously my application considers the

Generate base64 string of an image to use in data URI

由 心不动则不痛 提交于 2019-12-12 12:27:39
问题 How to generate base64 string of an image to use in data URI? I have an Base64 image encoding issue that I hope someone can help with. I'm trying to use data uri in my web page (ie <img src="data:image/png;base64,iVBORw..."/> with org.apache.commons.codec.binary.Base64 v1.8 generating the base64 string of png image. To generate the base64 string I have used: Base64.encodeBase64URLSafeString(imageFile) The problem is the browser cannot render the image. I compared this generated string with

Data URI's slow down page

由 寵の児 提交于 2019-12-12 10:58:15
问题 I built a script that replaced all inline images with data URI's to reduce http requests and seed up loading time on mobile devices. Unfortunately I experienced slower loading. I figure it depends on that the html file was bigger (around 100kb instead of around 5 kb) :)? Or is there something else with data URIs that slows down the page load? Must the browser complete download of the full document before it can load liked sources in it? Or will linked sources, for example css and javascript

Webpack inline font with url-loader

由 孤街醉人 提交于 2019-12-12 10:49:27
问题 I’m trying to inline some fonts as base64-encoded Data URI’s but am having no luck with Webpack’s url-loader. Which is weird because the url-loader seems to be doing just that for my image and svg files. My setup is below: directory structure root/ |-src/ |--assets/ | |----fonts/ | icon-fonts/ | fontawesome.woff2 | |----styles/ | fonts.css | |--components/ | main.component.js |... webpack.config.js module: { loaders: [ { test: /\.(jpg|png|svg|woff2)$/, exclude: /node_modules/, loader: 'url

SVG as data URI not rendering

由 感情迁移 提交于 2019-12-12 09:05:43
问题 It's probably just a syntax error but I can't find any thorough references on this kind of usage. Chrome is overstriking my background property, so I've obviously offended something. http://jsfiddle.net/YbA39/2/ I want what's in the red box (an svg css background) to render just like the inline svg in the html. Simple, right? Don't say it can't be done! My inspiration is this: http://jsfiddle.net/estelle/SJjJb/ 回答1: You haven't escaped the '#' characters in the url() syntax. And it's 'viewBox

appendChild dataURI image to window.open failing in IE

由 佐手、 提交于 2019-12-12 03:24:56
问题 I am trying to grab an image from an interactive map using dataURI. That image is then appended to a new window layout for printing. This works in Firefox and Chrome but not in IE11 or Edge which both throw errors. IE: "HierarchyRequestError" Edge: "No such interface supported" This question is very similar but unanswered and the offered solutions relate to objects other than image data. I suspect this method might work but i can't figure out how to implement it properly for a URI. Current
订阅 data-uri