Receive Image data as JSON and injecting it into the DOM

后端 未结 3 437
有刺的猬
有刺的猬 2021-02-01 05:53

I am packaging an image into jSON and sending it to the client .... On the client side I wish to display this data as a image ...

I am not sending the Image URL via JSO

相关标签:
3条回答
  • 2021-02-01 06:21

    I don't know how elegant your solution is, but you could encode the image as BASE64 and inline it using:

    <img src="data:image/png;base64,BASE64_ENCODED_DATA_HERE">
    

    It might also be noteworthy to say, that BASE64 encoding adds about ~33% overhead. Instead, you might create some temporary directory on your server, where you store such images and delete them after the request?

    0 讨论(0)
  • 2021-02-01 06:26

    You can accomplish this with data URL's in all browsers save for IE7 and below. The basic format is this:

    <img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
    /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
    V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7">
    

    You can read more about it here: http://www.websiteoptimization.com/speed/tweak/inline-images/

    0 讨论(0)
  • 2021-02-01 06:32

    You cannot send binary data to the browser inside JSON.

    You can use b64 encoding and the DataURI (MDC) (Wikipedia) in a browser that understands it

    Since the comments that came after my post all have an actual example, here is one from Wikipedia:
    <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

    Alternatively convert to SVG which is also textual

    0 讨论(0)
提交回复
热议问题