1

I've been working on creating my own email client. I'm already successfully displaying attachments and embedded images via data URI. I was wondering once stored in a data if there was any way for me to assign data such as an image to a variable in client-side code (be it XHTML, JavaScript, JSON, etc) so I only have to send a single copy to the client from the server saving bandwidth though be able to display that content (again, such as an image) multiple times?

Pure JavaScript, no frameworks or libraries.

Also the main goal is to transfer the data only once from the client to the server. Once in the DOM it's perfectly okay if we end up having two img elements in example.

As a bonus, I'd like to use two img elements but with the DOM still reference the same single data-uri if possible thus saving memory at the client.

John
  • 1
  • 13
  • 98
  • 177

1 Answers1

1

I was wondering once stored in a data if there was any way for me to assign data such as an image to a variable in client-side code

Use one of the following techniques:

  • Embed the data URI in an SVG element, then dereference it as a background-image URL

  • Embed the data URI in a script element, then dereference it as a dataset property

  • Store the data URI in a documentFragment, then wrap it in a function

References

Community
  • 1
  • 1
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265