Friday, March 30, 2012

Data URL? How to display an inline image

I recently wrote code to work with the Picup App. One of the parms returned by the app is thumbnailDataUrl. I had no idea what it was and had not heard of it. It looked this in the query string (shortened):

thumbnailDataURL=data:image/png;base64,xxjkjfdskfjksfjlksdjfklsjdfklsjflkjdflkksjfklsdjfksdjfl

At first I was so concerned with figuring out how to use the Picup to grab images that I did not pay attention to this piece until today.

I learned from this article that is a URL Data Scheme. And it is soooo easy to use, just throw it into the src value of an image tag!
<img src="data:image/png;base64,xxjkjfdskfjksfjlksdjfklsjdfklsjflkjdflkksjfklsdjfksdjfl" />
Love it!

No comments:

Post a Comment