Stack Overflow
Stack Overflow

Questions tagged [data-uri]

A data URI is a URL whose scheme part is 'data:' and which directly represents a resource, rather than the location of a resource.

The following is an example of a data URI:

data:text/html;base64,PCFkb2N0eXBlIGh0bWw+CjxodG1sPgogIDxoZWFkPg
ogICAgPG1ldGEgY2hhcnNldD11dGYtOD4KICAgIDx0aXRsZT5UaGVyZSBpcyBuby
BzcG9vbi48L3RpdGxlPgogICAgPHN0eWxlPgogICAgICBodG1sIHsgYmFja2dyb3
VuZDogI2ZhNTsgaGVpZ2h0OiAxMDAlIH0KICAgICAgcCB7IGNvbG9yOiAjNWFmOy
B0ZXh0LWFsaWduOiBjZW50ZXI7IG1hcmdpbjogNmVtOyBmb250LXNpemU6IDJlbS
B9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPjxhIGhyZW
Y9aHR0cDovL3N0YWNrb3ZlcmZsb3cuY29tL3RhZ3MvZGF0YS11cmkvaW5mbz5CYW
NrPC9hPjwvcD4KICA8L2JvZHk+CjwvaHRtbD4K

That data URI contains a HTML document. If pasted into the address bar of a compliant browser, the document it contains will be displayed without the need to request any external resources.

Data URIs can be used in the href or src attributes of <a> and <img> elements, etc., eliminating the need for additional HTTP requests.

592 questions
17
votes
1 answer

Data-URI's and caching

I read this on Wikipedia: Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files) so data is downloaded every time the containing documents are redownloaded. Does this mean that my code is downloaded every…
stephenmurdoch
  • 34,024
  • 29
  • 114
  • 189
17
votes
2 answers

css cursor using data-uri

I'm trying to use custom png cursor using data uri but the cursor doesn't change. I've tested on FF 17 which support png as custom cursor. The same data uri work as a background image. Am I using wrong syntax or maybe data-uri can't be used as a…
pablo
  • 2,719
  • 11
  • 49
  • 67
16
votes
6 answers

How to parse data-uri in python?

HTML image elements have this simplified format: That something can be data-uri, for example: data:image/png;base64,iVBORw0KGg... Is there a standard way of parsing this with python, so that I get content_type and base64 data…
blueFast
  • 41,341
  • 63
  • 198
  • 344
16
votes
3 answers

SCSS variable in background image with SVG image data URI

In the following SCSS, I would like to use the fg-color variable within the url background-image attribute. $fg-color: #ff6464; i.icon-back { background-image: url("data:image/svg+xml;charset=utf-8,
bguiz
  • 27,371
  • 47
  • 154
  • 243
15
votes
2 answers

Is there a URL shortener that works with really long data URIs?

I have an app that generates web-pages as data URIs. These data URIs can be really long. I have a page that has a Data URI that is 103,828 characters long, for instance. Everything about the app works and it's no problem, it's just slightly painful…
sanjayb
  • 176
  • 1
  • 6
15
votes
2 answers

How to embed a Base64 encoded PDF data URI into a HTML 5 `` data attribute?
So in my application, users have the option to upload a file to an (HTML 5 File input). I can subsequently grab this file using the following Javascript: var files = $("#my-file").files; var file =…
kibowki
  • 4,206
  • 16
  • 48
  • 74
14
votes
2 answers

How to inline fonts in CSS with webpack?

Problem background: I am using katex to render some math on a page. I then want to create a PDF version of part of that page, so I create a HTML document that containing the part to be exported that inlines all CSS and pass it to the renderer. The…
Axel
  • 13,939
  • 5
  • 50
  • 79
14
votes
3 answers

Validate a base64 decoded image in laravel

Im trying to get a image from a PUT request for update a user picture(using postman), and make it pass through a validation in Laravel 5.2, for making the call in postman use the following url: http://localhost:8000/api/v1/users?_method=PUT and…
Jorge Almonacid
  • 583
  • 2
  • 5
  • 9
14
votes
4 answers

Data URI Hash Parameters (Hide PDF toolbar for data URI)

I have a PDF base64 encode data URI. eg: return I am able to embed it in the page without any problem. However, by…
nmajor
  • 497
  • 4
  • 10
14
votes
3 answers

Using an Data URI SVG as a CSS background image

Backstory: Goal: create a triangular shadow that can be applied via CSS and is scale-independant (i.e. a vector, not a raster image) After much research (tho I'm certainly open to alternatives) I chose to use an SVG background image as a data uri…
jon
  • 5,961
  • 8
  • 35
  • 43
13
votes
1 answer

Including base64 gzipped stylesheets/images in javascript?

I know you can include css and images, among other file types, which have been stored in base64 form within a javascript file. However, those are decently huge... and gzipped, they shrink down a LOT, even with the ~33% overhead from base64…
BrianFreud
  • 7,094
  • 6
  • 33
  • 50
13
votes
1 answer

Wildcard MIME subtype

I'd like to use image/* MIME type in data URI e.g. data:image/*;base64,R0lGODlhE... in element. Is it standard-compliant MIME type at all? Can it cause problems in some browsers and if so, in which?
Maxim Kachurovskiy
  • 2,992
  • 2
  • 21
  • 24
12
votes
4 answers

Loading an svg in webpack with svg-url-loader

I'm having a lot of trouble working with SVG in my webpack workflow. I'm trying to get it to display with the background: url(sample.svg) property in CSS. Using this alone did not work, so I figured I had use a loader. Here are the steps I used. I…
InspectorDanno
  • 935
  • 2
  • 12
  • 23
12
votes
2 answers

What is the purpose of data URIs?

Why are resources sometimes embedded in data URIs, rather than using a regular URI that links to a resource stored as a file on a server?
Toby Allen
  • 10,997
  • 11
  • 73
  • 124
11
votes
2 answers

Generate image in pure JS without canvas

How to generate/draw picture in pure JavaScript (no external lib) from array of pixels without canvas? I try to generate image in URI form but without success (picture format-s are not easy to fast understand and implement)
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
1 2
3
…
39 40