Menu
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" />
933
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...
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
