How to show image using data url in html page - html

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" />


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...


You're better off using a png so that it can be cached.

Related

how to make img link to a simple code (Html and Css)

so i want to make all my img links into a simple word/code in html and css
Example:
//Not like this
<img src="https://img1.com">
<img src="https://img2.com">
<img src="https://img3.com">
//I want to do something a little bit more like this instead
value01 = https://img1.com
value02 = https://img2.com
value03 = https://img3.com
<img src="value01">
<img src="value02">
<img src="value03">
I don't know what to do I am new to HTML and CSS

I think you can't do this in html because
The <img> tag is used to embed an image in an HTML page, maybe you can do this in python, instead, you can do this:
<b>
<img src="value1.jpg" alt="Value1" >
</b>
Source :
img tag html

there are two ways I can think of.
::THIS FIRST OPTION ONLY WORKS IF YOU SAVE THE PAGE IN (.PHP) EXTENSION
1° Method => You can create a php file apart, store the links of images in variables like this.
< ? php
$img = 'https : // upload . wikimedia . org /wikipedia/commons/thumb/c/c3/Python-logo-notext . svg/1200px-Python-logo-notext . svg . png';
? >
next, you can call this file in the main page/index.
< ? php
include ". /page/images . php";
? >
< html >
< img src="< ? php echo $img; ? >" alt="" srcset="">
< / html >
2° Method => you can just save the image to a folder easy to target.
create a folder inside the same folder you are accessing your main page.
for example: I created a folder called (img) in the same folder my index.html is found, save the image with a short name.
so to access that image i would call the image like this
< img src="image/img.png" alt="" srcset="">

Replacing ALL HREF URL attributes with ALT tag and Placeholder Text

I need to find an automated way to update href URLs in a HTML file with the corresponding image alt text the anchor tag is wrapping while also including leading and closing RPL text.
Start:
<img src="/images/image.jpg" alt="ALT_TEXT">
End:
<img src="/images/image.jpg" alt="ALT_TEXT">
Breaking down the new URL:
First Variable: ${clickthrough('<br>
Second Variable: ALT_TEXT<br>
Third Variable: ')}
Anyone know where I should start in designing a solution for this problem? What coding language might handle this?

The language that you are looking for is JavaScript.
Here is a working example that does what you mentioned. (and here is a codepen with the same example)
const anchorElements = document.querySelectorAll('a');
[...anchorElements].forEach((anchor) => {
const altText = anchor.querySelector('img').alt;
anchor.href = "${clickthrough('" + altText + "')}";
})
<img src="https://place-hold.it/300x100" alt="text1">
<img src="https://place-hold.it/300x100" alt="text2">
<img src="https://place-hold.it/300x100" alt="text3">

How to extract something I want in html using 'xpath'

The html code is looking like this:
<img alt="Papa's Cupcakeria To Go!" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-old-hires="" class="a-dynamic-image a-stretch-vertical" id="landingImage" data-a-dynamic-image="{"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L.png":[512,512],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SX425_.png":[425,425],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SX466_.png":[466,466],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SY450_.png":[450,450],"https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L._SY355_.png":[355,355]}" style="max-width:512px;max-height:512px;">
I want to get "https://images-na.ssl-images-amazon.com/images/I/814vdYZK17L.png" and now I'm using
extract_item(hxs.xpath("//img[#id='landingImage']/#data-a-dynamic-image"))
, what I got is all the content inside that tag.
How can I get the first url only?

If you just want the first URL:
full_content = extract_item(hxs.xpath("//img[#id='landingImage']/#data-a-dynamic-image"))
list_contents = full_content.split(";")
first_image = list_contents[1].replace("&quot","")
print first_image
Also, you can refer this for extracting URL using regex.

Elixir - How to embed an image into an html , on email

I am trying to embed an image to html when sending email.
I have the image (logo.png) and html (welcome.html.eex) located under priv
Sadly, I receive the email without the image in it.
here is the email I receive:
when I inspect element I get: (no src=" ... ")
<img width="212px" height="26px" align="bottom">
though - when I preview locally my html (from my-html.html - see in my code ) seems ok:
here is my welcome.html.eex
<p>
<span>
<strong>Bem-Vindo hii</strong> à
<img
src="<%= ~s(data:image/png;base64,) <> Base.encode64(File.read! (Path.join("#{:code.priv_dir(:my_app)}", "logo.png"))) %>"
width="212px" height="26px" align="bottom"/>
</span>
</p>
here is my code, sending email adding the html using bamboo:
import Bamboo.Email
def send_verify_email() do
File.write "my-html.html", get_html() # writing the html localy - to verify..
new_email()
|> to("foo#bar.com")
|> from(#from_addr)
|> subject("Welcome")
|> html_body(get_html())
|> Mailer.deliver_later
end
end
def get_html() do
EEx.eval_file(Path.join("#{:code.priv_dir(:my_app)}", "welcome.html.eex"), [tok: "123"])
end
what am I doing wrong?
how can I attach a base 64 image on email html?
edit
I also tried adding image by path
welcome.html.eex
<img src="<%= Path.join("#{:code.priv_dir(:my_app)}", "logo.png") %>"
but still get same results - locally html seems ok, but on email html is:
when I inspect I get
<img src="https://ci4.googleusercontent.com/proxy/4eMU8Te6MM215JLJ5gm3Z9jnC4hytOkDeF4ldFGb1pC17GDhtZphCtH623p1ZwNYZxBfAatQtlX_V9MKALbOE0jIzxVXJ43tZLeA5hUT7tjs7FEz3_PVoUQ5Ih7w0rvuRtLy7pVqR9UoU5TBF5E=s0-d-e1-ft#http:///home/dina/Documents/WK/my_umbrela_app/_build/dev/lib/my_app/priv/logo.png" width="212px" height="26px" align="bottom" class="CToWUd">
so I do have src="" but it seems broken.. :(

SVG rendering error after update

Im collecting digital signatures, SVG path, with an iPad.
Signatures are viewed with a browser (Chrome) which have worked perfectly for years.
Suddenly it was not perfect, whitespace are added below and to the right of the signature and it messes up my tables. I traced this back to an update of Chrome. If I downgrade Chrome it works like a charm.
Confusing is that same rendering error appears in IE and Firefox! New standard? Anyone knows how to fix this?
Code:
<svg xmlns=http://www.w3.org/2000/svg version=1.1><g transform=scale(0.14,0.14)> <g fill=none><path stroke=black stroke-width=8 d='M100,24 L98,24 L94,22 L86,22 L74,23 L63,27 L54,33 L49,38 L46,47 L46,58 L53,70 L60,78 L67,87 L72,97 L76,106 L79,117 L80,126 L80,136 L79,145 L72,151 L63,155 L51,157 L42,157 L32,153 L23,145 L17,139 L15,135 L14,132 L14,126 L23,121 L36,119 M138,87 L134,92 L134,99 L134,111 L132,123 L131,132 L131,138 L131,142 L131,143 M148,33 L145,35 L145,37 L145,39 L145,41 L146,42 L147,43 L148,43 L148,41 L148,36 L148,34 L147,33 L145,33 L144,33 L144,40 M241,89 L236,87 L231,87 L221,88 L209,94 L200,98 L195,101 L192,107 L192,110 L192,117 L195,121 L202,126 L212,126 L216,126 L224,123 L230,108 L237,91 L244,76 L247,67 L247,64 L247,63 L247,64 L246,70 L246,77 L245,85 L243,97 L240,112 L236,121 L231,131 L226,139 L221,146 L213,152 L205,157 L193,161 L180,164 L166,165 L154,165 L146,160 L144,151 L145,135 L155,123 L167,114 M285,68 L282,76 L280,87 L277,103 L275,116 L274,125 L273,128 L273,131 L279,120 L285,101 L295,77 L303,67 L306,63 L307,63 L309,63 L311,71 L314,82 L319,100 L322,112 L324,124 L326,132 L326,138 L326,141 L326,144 L325,144 L324,140 M393,91 L388,90 L382,90 L376,90 L366,90 L357,93 L350,101 L344,111 L343,120 L345,129 L353,132 L368,132 L379,124 L386,110 L394,89 L397,77 L397,75 L397,77 L396,97 L396,116 L396,130 L396,143 L399,152 L401,157 L403,160 L406,160 L411,149 M439,32 L438,34 L438,43 L440,56 L440,70 L441,84 L441,98 L441,111 L441,124 L440,133 L440,140 L440,145 L438,149 L435,150 M414,64 L416,65 L424,67 L433,67 L443,69 L450,71 L455,73 L460,74 L464,77 L467,78 L470,80 M489,83 L490,89 L490,104 L489,121 L488,134 L488,145 L492,150 L498,154 L504,154 L512,149 L517,137 L519,123 L520,115 L520,109 L520,106 L520,101 L519,101 L518,101 M549,85 L548,87 L547,92 L545,103 L543,115 L542,123 L542,129 L541,132 L541,135 L540,126 L539,111 L539,97 L543,85 L547,79 L550,77 L552,76 L556,76 L562,79 L568,83 L574,89 L577,91 M573,103 L574,105 L579,106 L586,108 L593,109 L596,110 L598,110 L598,109 L597,104 L594,99 L591,94 L588,92 L586,90 L585,90 L584,90 L583,91 L581,102 L577,118 L576,131 L577,145 L582,155 L591,160 L601,163 L610,164 L620,161 '></g></svg>

Assuming this svg is part of a larger html page then you almost certainly need height and width attributes on the <svg> element. Try height="100%" width="100%"
Firefox has worked this way for years as it's what the specification says. Chrome has recently changed to be compatible with Firefox and the SVG specification.