How to show image using data url in html page

16,455

Is is possible to show it... ?

Yes, it is perfectly possible to show base64 encoded images on <img>'s tag src attribute.

http://jsfiddle.net/7dnygshL/

Just, be aware that on the base64 image your provided, the image is a pure transparent image... That may be confusing you, but inspect the element and see that the image is been loaded...

Share:
16,455
Andrus
Author by

Andrus

Updated on June 14, 2022

Comments

  • Andrus
    Andrus over 1 year

    How to show image using data url in html page from ASP.NET MVC4 c# application ?

    I tried code below in Chrome and in Internet Explorer but empty image appears. There are no errors in borwser console window.

    Image url is returned form signature pad https://github.com/szimek/signature_pad

    Is is possible to show it or should I convert to png file in controller ?

    html:

    <!DOCTYPE html>
    
    <html>
    <body>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxcAAADVCAYAAAAl6A0eAAAcKElEQVR4Xu3da6x0V1kHcG6ltlRQlKKI8WAwxEgU0GirEY7GGCVGazQRhKRvo0aIRvATaFSKEuWD0fpBjJfEt15CPxitH0CDUY RD6IR8QKCQTlyaSViEKFoAanPX/eKq7sz58x5z5rzzuW3k5XZM7P3s9b 7TUz65m998zDH2YiQIAAAQIECBAgQIDAAIGHD4ghBAECBAgQIECAAAECBB4mudAJCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIECBAYIiC5GMIoCAECBAgQIECAAAECkgt9gAABAgQIECBAgACBIQKSiyGMghAgQIAAAQIECBAgILnQBwgQIECAAAECBAgQGCIguRjCKAgBAgQIECBAgAABApILfYAAAQIECBAgQIAAgSECkoshjIIQIECAAAECBAgQICC50AcIECBAgAABAgQIEBgiILkYwigIAQIECBAgQIAAAQKSC32AAAECBAgQIECAAIEhApKLIYyCECBAgAABAgQIECAgudAHCBAgQIAAAQIEFgk8ox58XJWMF/ 9ylswEThNQHJxmpDnCRDYRYFPq41KyZQPzHY/85kOp8cz35bLB2y739bpbdq6LWZ77kNTrDzf13XcrZw6cn/err7 tvi83Q/0jaj5NgjIcn2b m2dt3FZ/a2uvu5F296eb/Utq7uPs2h7T6pvvp39ZrfPsvk aJ6nWfexWttzu6jOeV1t b7ufvv7bernT9qe1p75Z3S242DqJxnkte1r y/PzePO2zfvP/P sqyOvv/P 2K//9Pf0454LFpn1l0X3m2vlbSttf8ssbL dVWu7V4D87413 ftNfHEmrm/e3K //r 3 Y/WstfP9W1bH/3Rln241X tduHJ7m0vtXXk Xb/u/Xbe7X1IOfOCFo1n10lY91cVrb76vHHnPCuu u5/6gyquqHK yQy2zXwKSi/3a37aWwC4JHNTGpGQw9YzpAzLb1x7vP3w/fdrw/oMwH6R3V8kgLeskRu5nOpweX TVDz5P8pwP/Fp70obUl9vUnXpTLk/BLnV1t VyOx8cZRCRxxdNid3qy20brPWD0L7 xGnb3urPY619LVYb5Cwb1LTBVluub2Nipc7E7a1vmR7vl23b2lu3mG175h5zh/k2L7JO3YnT kCLsci6b1O2Y9Eyrc5s39G0TOaXxZ23edn9FjfPp 7EbG3u23GaySKjft82476OxMw WxZ7/ngGrE9a0r7U1ZKE1pYkI3kst5nm zl1Z1tTTyt9jH eHu9jJM4jqnxyipf15vXOLXI/bXhklRum VXWyXofmdZZFHOXH8u  tYqR7u8kbbt7AKSi7ObWYMAgfUJ9AOI1HJQ5fOqPHOqMvczsMqHfgYVx9PjuV00n6fzeD84W1/rRSZAYF8FWpKV95o EW3J0vz53M97U3s87239unHs37f6pKs9194v81zW76cWf/54W2ZeV3s86yU5vLF7T72p5p9eJUdCnrNgBz /HrtrX3e87X6ogORCryBA4KIEkhTkgyvJQv9taI4q5Ll8O5mSD8M8f/fUsMzn8fZBK1G4qD2mHgIECDxYIO/HL6/y4iqP7Z66t Z/qMqdwAhILvQBAgRGCSQpSPmSKTlIwtAey3vN8ZQgJFHo51N/uz qLeIQIECAwPoEnluhX7cgfI5u/GSVV6yvapE3XUBysel7SPsIbI5AO9qQFiVpSBKR05Uy3xKE3LbkIQlDpqPN2QQtIUCAAIFBAndUnJcsiZXPgdumz4NB1QmzLQKSi23ZU9pJYP0COdKQqT99KclDTkNKgtAezwdKm/JcPkRMBAgQILB/AvlcyPUWT1uy6d9bj//S/rHs9xZLLvZ7/9v6/RLIkYd8EORi6P6UpYO6n seWhIRlf7og Rhv/qJrSVAgMBZBfKZkuvkck3dfPrNeuCFZw1o e0VkFxs777TcgKLBNqpS3mDP6zS7rejDn/dJRHtqMNxPZZiIkCAAAEC5xG4pVb tSqfOgvyg3W/P p9njqsu ECkosN30GaR2CBwMGUNOSpzN9aJUcekkhkStJwvKQAJUCAAAEC6xTIZ9Hrq9zcVfLKmr99nZWKvTkCkovN2RdaQqAJtKMM/a8u5c06r9ckDm3KIegkEXkut05f0ocIECBAYBMEcqTiZ7qGvK/m818Z/WfYJrRTG9YgILlYA6qQBFYQOKxlcurSwZQcJKFoSUVWzx/Eza97SAKRYiJAgAABApss8IJq3G/MGujoxSbvsYFtk1wMxBSKQCfQkoYcfch8K30CkcX/ZEoYWuLQEgrf7uhOBAgQILCtAjmi/tYq bfvfmo/HrKt26XdKwhILlZAsgiBBQLt oYkDYdVkgwkkWhHILJKlskRiHYNREscctseg0uAAAECBHZRIJ B91S5rtu4X6z5F 3ixtqm/xeQXOgNBJYLJHFopy5lvh11yG2m9q/Tmc/1D 3ah6Pp eO6dQRCDyNAgACBfRV4dW34y7qN/6 a75ONfXXZ6e2WXOz07rVxKwgkUeivfTis 0kkUuZTfwpTEoh2BGKFaixCgAABAgT2TiBfur2jyo3dln9fzb9m7yT2aIMlF3u0s/dwU/OmlpIE4jFVnjolDXnscHpuzpL/gTjuEockEJKIPew8NpkAAQIEhgj8SEX5iS7SnTV/aUhkQTZSQHKxkbtFo1YUSILQ/m06q7TTlg6mJKIP8 G688kqR1VyqlISjD5xyOMmAgQIECBAYLzAA13IfAbnwm7TjgpILnZ0x275ZrXkIIlDkoDPrvIVU1LQXzC9aDM/VA8eT8UF1FveETaw bdUm36gyv1V0r9uqPKBqW  v27fPs3nw/O0623SzzOlv5oIECCwywJ5v8yPnrTJ HOH97adu8M7d4M3LQlCEofDqY0nHXHoN6P/5aUMyNoALm9amY42eJs1bfsFDmoT3nXOzUhScu2SGO tx99ZJX07fTrX LS fc5qrU6AAIGrKnB71f6KrgVPmd7rrmqjVL4eAcnFelz3MWqOMLR/lM4gLPcztcevqfknV8lzp039dQ/H0wDLIOs0Nc vW CwKvjjdVeyIH6S6CQe7QhJXhPtqEjmU3LEzmvkKuwcVRIgsJJAxgIf7JZ8c81/6UprWmjrBCQXW7fLNqLBB9WKJBLPqvLsKrmfsurUBkIZILWLpfvbVeNYjsBFCxxVhc/pKs3PKr6pSk7de1SVX5 e 8y6TTIwn/LDAvdVaX0/z dDN0fvHlHlsdNrKa n/hSCVbfzH2vB91Q5nkraK/FYVc9yBAisU C3Kvi3dRV8Tc3nPcq0YwKSix3boWvanAx0MqDK eYZBOX fMopSxnQZGqJQubbY7ntH19TU4UlsHaBJAOnXU8xqhHtlMGbK ATp9dfOxp4ljrS3r p8k9Vjqrk6KAjHWcRtCwBAucVeF4FeG0X5JU1f/t5g1p/8wQkF5u3TzahRQfViHxrejiVDHD6Kd EZoDSikHKJuw1bdhHgXbUI9ue12uOjDyhSl7DqyQhd0 v43aNxz4a2mYCBC5G4Lurml/uqkqi8Z0XU7VaLlJAcnGR2uPryqA/30geLwmdAUb IC77ObcZbLRrIdoqbXCSODmV44ur5Cdb58vlyEQGIperSCbG70sRCaxLIK/lwyo3TaU/rWte59vqgT fXuN5necIx0UdpVnX9otLgMBmCOR9qL9uLV9Uzscam9FSrTiXgOTiXHxXbeUcWvy5Kv0/Xt5T9/ hynGVg2kwcZ4GOjpxHj3rEthsgXwxkdMc82Gf fx627IpSUYrSTaONnvTtI4AgQ0WyFgl16i16baaubzB7dW0KxCQXFwB2lVeJS/CWwe3of03RAYQueDqjVV8WzkYWTgCGyyQbw9fXCUXWH55lZOSjf u5/OnlO0I5lHNp Snc00ECBA4SeDV9eTLugXy3pH3HdMOCUgutm9n5gP9rL8i845a5/erJGFop1G15CG3TnPavn6gxQTWKdAf2TjpNKq DfmS4neq5CLN43U2TmwCBLZa4N3V s/ttiD/1u0Lza3epQ9uvORi 3ZmPvTzc5dPX9L0nBp1b5WjKWnIdRImAgQInEfgoFbOe883V/miKvnlqlzHtWy6o55IkmHAcB516xLYTYFfqM16Ubdpz6/5u3ZzU/dzqyQX27vf2/nSOZ2hHY1IInG8vZuk5QQIbJlAu1j8u6rd3zRre96LkmT8rvelLdurmnulAu3zuF2knNtW5ol2kvMk7P2UZd5f5c92/DXz3Nq 13UbnmtIX3ql6NbbPAHJxebtEy0iQIDANgocVKMvV1l0GlV/ uVRLZNTqP6qius0Fu/pWOb019ym9IPQZ9b9XPfyH1Xaqa6J0gavH63566u0AW6rYX6/Ld8ev64WzFHvZYPhNnBuy6Vdfb39wDqxs9y1Xbx S1vdGYNkWx6/mOF/t2mVZVJ3PPInlPOpxfhIPfHxzmU 2M pOemX bXEtm2LYqWu 6dtW9LsIQ8fV5Tfm9qUP t8S5V/q/J3VeZtH1LhBQfJ9rWjn5l/ygXXr7o1Ckgu1ogrNAECBPZQIN9A3l7lpIvCe5Y31J0MiC9XSbIxcuCUgWAG6bnNqVy5/qxNGUTmwvR gJ7llp3uleXzL ptyufnu6rkZ7rPOh1M9SRpSJ3t9lk1f02VDMyvdMpA9FOudGXrbYVAEo07quT1crwVLX5oI9P l8xeT1u6KZo9F5Bc6BMECBAgMFogA ZbqryqyuecMXgG/ClJODJI/kSVR1X5lyr5Rv7vq/xtldTxWVXePsXPN B/WuUrq QXrzJgPzhj3SMWb99qJ2nJIDBT2ppvZh9d5SyJQxKX464kZu7nn9aT6GQ jyV K/39VbanLR /R56wwqrLtRB9vLRtPrV42b85qnAwW6A9n9ssk/9hypRY/XPtsfSPllS1BLXdZp1863/S9iVOa3Pa0trc6utjpT/ecApu/tDyvgXLJMl9WpU UW2LfUHNPOmUuP3TD9Sd91T57Sp3V/lgF7f1vTOEu9BF8/6QH4BoU14fxxfaApWtTUBysTZagQkQIECgBDLIP6ySQVpub66SQbbp/07DySAwg6p2m8Qhp/gYaO1nD8nr5FKVDL5zimGS7L okkQ6SclZpiRESTrurHJ0lhUvYNm8L TUyDb9fM18/wXUq4oLEJBcXACyKggQIEDgQQIZOB1W foqX7hmmwzgc556vmnOACuDtydUyWlOf9nVnW 9n1rlvVUy8GlTBmjtW/MP1Hzup R6giRJ ea4n anT W5LH9cpX17nvkUE4GzCrTXzjfUimdJNr6nlv Vs1a2xuUvVexf7eLn1 VuX2N9Ql ggOTiArFVRYAAAQIPETicBhWr/p/GMsIM4HNNxVurZMB/VOV4KtgJ7KpAXj8p317l86ucdNpdfgxgU06X rFqSxKKNv1hzXzdru6kfdsuycW 7XHbS4AAgc0UyBGFHDHI6R85f75N7dz2nJd/PJXN3AKtInD1BQ6qCa0c1vytsyblD z qMpRlfxMdLuW5KJbnv/remFXaf6j6yxHYi66veo7g4Dk4gxYFiVAgAABAgQIbJHA/MLpvulJLC5XuRp/ePmzVe9Lu8Yc17yfo92ijnVSUyUXO7IjbQYBAgQIECBAYIHApXos/4q97CeK86d9L6/Sfp1s3Yg5SpmL1HONUz8Zk65b/oLi25EXBK0aAgQIECBAgMBVEjioeu o8i0n1J8jGUdVbquyrtOlXlCxX1Nl/oeH Qln/89ylTrH6GolF6NFxSNAgAABAgQIbKZAkoycKpUjFfnPjUVTrsvIn0 OSDAOK853VPmyqSxT8WtRm9lfrqhVkosrYrMSAQIECBAgQGCrBfIP389esgUfq8dfX WsRzFyytMPV/nqKjetqJP/4bi04rIW2wIBycUW7CRNJECAAAECBAisQeCwYubC6m ssujPLfO/LfmltvyC2xurPL5Kfs723ir56edMX1vlydPtwYpt/M9a7s1VfrpK/ujPtEMCkosd2pk2hQABAgQIECBwBQI/Wuv8 BWst oq76sF31nlaEomNuX/NlZtv XOICC5OAOWRQkQIECAAAECOyiw7BecrmRTP1wrva3KXVWSRCShMO2RgORij3a2TSVAgAABAgQInCDwvHruxio/VeX6BcvldKacIvUZVR6o8rgqb6qSX396w5RIOM1pz7uY5GLPO4DNJ0CAAAECBAjMBA7q/ldVua7KPVVycbeJwEoCkouVmCxEgAABAgQIECBAgMBpApKL04Q8T4AAAQIECBAgQIDASgKSi5WYLESAAAECBAgQIECAwGkCkovThDxPgAABAgQIECBAgMBKApKLlZgsRIAAAQIECBAgQIDAaQKSi9OEPE AAAECBAgQIECAwEoCkouVmCxEgAABAgQIECBAgMBpAv8DFBfj9Ld6cr0AAAAASUVORK5CYII=" height="100" width="300">
    </body></html>
    

    Razor view:

    <img src="@Model.ImageData()" height="100" width="300" />
    
  • Andrus
    Andrus about 9 years
    I'm using wkhtmltopdf to convert this html to pdf. If img whose shouce if png file is used, image does not appear in pdf file