Bagaimana cara mengatur string svg base64 ke tag gambar src?

Saya punya pertanyaan. Pada kode di bawah ini, img.onload tidak diaktifkan ketika saya menetapkan base64 sebagai src. Tetapi ketika saya menyetel gambar langsung ke src, img.onload dipecat dan console.log mengembalikan "gambar dimuat". Bisakah Anda menjelaskan apa penyebab img.onload diaktifkan hanya jika itu adalah gambar bukan string base64. Juga, cara membuat string base64 menembakkan img.onload.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

</head>

<body style="background-color:#F5F5F6;">
</body>
<script>
    (function() {
        var b64 =
            "data:image/svg+xml;base64,PGRpdiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCIgaWQ9ImdyYXBoMCIgc3R5bGU9IndpZHRoOiA4MDBweDsiPjxkaXYgaWQ9ImdyYXBoMF90aXRsZSIgc3R5bGU9InBvc2l0aW9uOiByZWxhdGl2ZTsgZGlzcGxheTogdGFibGU7IG1hcmdpbjogMHB4IGF1dG87IHBhZGRpbmc6IDEwcHg7IGZvbnQtc2l6ZTogMTBweDsgZm9udC1mYW1pbHk6IEFyaWFsLCBIZWx2ZXRpY2EsIHNhbnMtc2VyaWY7IGZvbnQtd2VpZ2h0OiBub3JtYWw7IGZvbnQtc3R5bGU6IG5vcm1hbDsgY29sb3I6IHJnYigwLCAwLCAwKTsiPlRpdGxlPC9kaXY+PGRpdiBpZD0iZ3JhcGgwX2NoYXJ0IiBkYXRhLWhpZ2hjaGFydHMtY2hhcnQ9IjUiIHN0eWxlPSJoZWlnaHQ6IDMwMHB4OyI+PGRpdiBpZD0iaGlnaGNoYXJ0cy03cDBmc2gyLTEwIiBjbGFzcz0iaGlnaGNoYXJ0cy1jb250YWluZXIgIiBzdHlsZT0icG9zaXRpb246IHJlbGF0aXZlOyBvdmVyZmxvdzogaGlkZGVuOyB3aWR0aDogODAwcHg7IGhlaWdodDogMzAwcHg7IHRleHQtYWxpZ246IGxlZnQ7IGxpbmUtaGVpZ2h0OiBub3JtYWw7IHotaW5kZXg6IDA7IC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogcmdiYSgwLCAwLCAwLCAwKTsiPjxzdmcgdmVyc2lvbj0iMS4xIiBjbGFzcz0iaGlnaGNoYXJ0cy1yb290IiBzdHlsZT0iZm9udC1mYW1pbHk6JnF1b3Q7THVjaWRhIEdyYW5kZSZxdW90OywgJnF1b3Q7THVjaWRhIFNhbnMgVW5pY29kZSZxdW90OywgQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZjtmb250LXNpemU6MTJweDsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjgwMCIgaGVpZ2h0PSIzMDAiIHZpZXdCb3g9IjAgMCA4MDAgMzAwIj48ZGVzYz5DcmVhdGVkIHdpdGggSGlnaGNoYXJ0cyA1LjAuMTQ8L2Rlc2M+PGRlZnM+PGNsaXBQYXRoIGlkPSJoaWdoY2hhcnRzLTdwMGZzaDItMTEiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI3ODAiIGhlaWdodD0iMjc1IiBmaWxsPSJub25lIi8+PC9jbGlwUGF0aD48L2RlZnM+PHJlY3QgZmlsbD0iI2ZmZmZmZiIgY2xhc3M9ImhpZ2hjaGFydHMtYmFja2dyb3VuZCIgeD0iMCIgeT0iMCIgd2lkdGg9IjgwMCIgaGVpZ2h0PSIzMDAiIHJ4PSIwIiByeT0iMCIvPjxyZWN0IGZpbGw9Im5vbmUiIGNsYXNzPSJoaWdoY2hhcnRzLXBsb3QtYmFja2dyb3VuZCIgeD0iMTAiIHk9IjEwIiB3aWR0aD0iNzgwIiBoZWlnaHQ9IjI3NSIvPjxyZWN0IGZpbGw9Im5vbmUiIGNsYXNzPSJoaWdoY2hhcnRzLXBsb3QtYm9yZGVyIiB4PSIxMCIgeT0iMTAiIHdpZHRoPSI3ODAiIGhlaWdodD0iMjc1Ii8+PGcgY2xhc3M9ImhpZ2hjaGFydHMtc2VyaWVzLWdyb3VwIj48ZyBjbGFzcz0iaGlnaGNoYXJ0cy1zZXJpZXMgaGlnaGNoYXJ0cy1zZXJpZXMtMCBoaWdoY2hhcnRzLXBpZS1zZXJpZXMgaGlnaGNoYXJ0cy1jb2xvci11bmRlZmluZWQgaGlnaGNoYXJ0cy10cmFja2VyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMCwxMCkgc2NhbGUoMSAxKSI+PHBhdGggZmlsbD0iIzk0MDBEMyIgZD0iTSAzODkuOTc4MzA4ODAzODA2NDQgNTIuMDAwMDAyMjA4OTU3NzQgQSAxMDYuNSAxMDYuNSAwIDAgMSA0MTcuNDYxMDI4NDY0NzI5MzQgNTUuNjAxMzAyNjUzMjQzODM1IEwgMzkwIDE1OC41IEEgMCAwIDAgMCAwIDM5MCAxNTguNSBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaGlnaGNoYXJ0cy1wb2ludCBoaWdoY2hhcnRzLWNvbG9yLTAiLz48cGF0aCBmaWxsPSIjRkYwMDAwIiBkPSJNIDQxNy41NjM5MTM0MTQ0MTMyIDU1LjYyODgxNTEyNjQ3NjEgQSAxMDYuNSAxMDYuNSAwIDEgMSAyOTcuMzQ0OTI4OTcyMDkxMzQgMjExLjAwOTg4MzAwMTMyODQzIEwgMzkwIDE1OC41IEEgMCAwIDAgMSAwIDM5MCAxNTguNSBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaGlnaGNoYXJ0cy1wb2ludCBoaWdoY2hhcnRzLWNvbG9yLTEiLz48cGF0aCBmaWxsPSIjNEIwMDgyIiBkPSJNIDI5Ny4yOTI0NjU0MjUzNzMzIDIxMC45MTcyMDE2OTA4MDM3MiBBIDEwNi41IDEwNi41IDAgMCAxIDI4NC43NjcwNDYzNDk4NDIgMTQyLjEyMDg4MzIzMzEwMTMgTCAzOTAgMTU4LjUgQSAwIDAgMCAwIDAgMzkwIDE1OC41IFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJoaWdoY2hhcnRzLXBvaW50IGhpZ2hjaGFydHMtY29sb3ItMiIvPjxwYXRoIGZpbGw9IiNGRjdGMDAiIGQ9Ik0gMjg0Ljc4MzQ3ODA4MDM1MTUzIDE0Mi4wMTU2NTg0ODY1NDc2NiBBIDEwNi41IDEwNi41IDAgMCAxIDM4OS44NTIwNzM2MzY1OTU0IDUyLjAwMDEwMjczMzQyNTA4IEwgMzkwIDE1OC41IEEgMCAwIDAgMCAwIDM5MCAxNTguNSBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaGlnaGNoYXJ0cy1wb2ludCBoaWdoY2hhcnRzLWNvbG9yLTMiLz48L2c+PGcgY2xhc3M9ImhpZ2hjaGFydHMtbWFya2VycyBoaWdoY2hhcnRzLXNlcmllcy0wIGhpZ2hjaGFydHMtcGllLXNlcmllcyBoaWdoY2hhcnRzLWNvbG9yLXVuZGVmaW5lZCAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLDEwKSBzY2FsZSgxIDEpIi8+PC9nPjxnIGNsYXNzPSJoaWdoY2hhcnRzLWRhdGEtbGFiZWxzIGhpZ2hjaGFydHMtc2VyaWVzLTAgaGlnaGNoYXJ0cy1waWUtc2VyaWVzIGhpZ2hjaGFydHMtY29sb3ItdW5kZWZpbmVkIGhpZ2hjaGFydHMtdHJhY2tlciIgdmlzaWJpbGl0eT0idmlzaWJsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMTApIHNjYWxlKDEgMSkiIG9wYWNpdHk9IjEiPjxwYXRoIGZpbGw9Im5vbmUiIGNsYXNzPSJoaWdoY2hhcnRzLWRhdGEtbGFiZWwtY29ubmVjdG9yIGhpZ2hjaGFydHMtY29sb3ItMCIgc3Ryb2tlPSIjOTQwMEQzIiBzdHJva2Utd2lkdGg9IjEiIGQ9Ik0gNDEyLjg0NDE2MDY5NDU1OTk1IDIzLjE3MTM3ODAxMjIzNzQ4NiBDIDQwNy44NDQxNjA2OTQ1NTk5NSAyMy4xNzEzNzgwMTIyMzc0ODYgNDA1LjQ5MTA4NDU1OTAxMzY0IDQxLjAxNjkxMDU4MjA1MjMyIDQwNC43MDY3MjU4NDcxNjQ5IDQ2Ljk2NTQyMTQzODY1NzI2NiBMIDQwMy45MjIzNjcxMzUzMTYxIDUyLjkxMzkzMjI5NTI2MjIxNCIvPjxwYXRoIGZpbGw9Im5vbmUiIGNsYXNzPSJoaWdoY2hhcnRzLWRhdGEtbGFiZWwtY29ubmVjdG9yIGhpZ2hjaGFydHMtY29sb3ItMSIgc3Ryb2tlPSIjRkYwMDAwIiBzdHJva2Utd2lkdGg9IjEiIGQ9Ik0gNTAyLjg5MjY1MDUyMzUwNjQgMjQyLjExNDc0NzI4MTg3OTEyIEMgNDk3Ljg5MjY1MDUyMzUwNjQgMjQyLjExNDc0NzI4MTg3OTEyIDQ4My42NjUwNDgyNTY2NzA0IDIzMS4wODg2MjY3NjExOTE4IDQ3OC45MjI1MTQxNjc3MjUwNyAyMjcuNDEzMjUzMjU0Mjk2IEwgNDc0LjE3OTk4MDA3ODc3OTc1IDIyMy43Mzc4Nzk3NDc0MDAyIi8+PHBhdGggZmlsbD0ibm9uZSIgY2xhc3M9ImhpZ2hjaGFydHMtZGF0YS1sYWJlbC1jb25uZWN0b3IgaGlnaGNoYXJ0cy1jb2xvci0yIiBzdHJva2U9IiM0QjAwODIiIHN0cm9rZS13aWR0aD0iMSIgZD0iTSAyNTAuNjk2MDExMzUyMTcxMzUgMTgyLjg4NjIzODYwNDY3MDMgQyAyNTUuNjk2MDExMzUyMTcxMzUgMTgyLjg4NjIzODYwNDY3MDMgMjczLjQwNjQyNzQzNzU5OTM1IDE3OS42NzA0NzA4NzY1ODE5IDI3OS4zMDk4OTk0NjYwNzUzIDE3OC41OTg1NDgzMDA1NTI0NCBMIDI4NS4yMTMzNzE0OTQ1NTEyNyAxNzcuNTI2NjI1NzI0NTIyOTciLz48cGF0aCBmaWxsPSJub25lIiBjbGFzcz0iaGlnaGNoYXJ0cy1kYXRhLWxhYmVsLWNvbm5lY3RvciBoaWdoY2hhcnRzLWNvbG9yLTMiIHN0cm9rZT0iI0ZGN0YwMCIgc3Ryb2tlLXdpZHRoPSIxIiBkPSJNIDI5Ni4yNTExMzcxNzkyNDIzIDU0Ljc4OTM5NjE2NDAyNjA3IEMgMzAxLjI1MTEzNzE3OTI0MjMgNTQuNzg5Mzk2MTY0MDI2MDcgMzEyLjk1NDI4MzkyNDgzNjcgNjguNDY1NTE5NzQ2NzkxODcgMzE2Ljg1NTMzMjg0MDAzNDg2IDczLjAyNDIyNzYwNzcxMzggTCAzMjAuNzU2MzgxNzU1MjMzIDc3LjU4MjkzNTQ2ODYzNTcyIi8+PGcgY2xhc3M9ImhpZ2hjaGFydHMtbGFiZWwgaGlnaGNoYXJ0cy1kYXRhLWxhYmVsIGhpZ2hjaGFydHMtZGF0YS1sYWJlbC1jb2xvci0wICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDE4LDEzKSI+PHRleHQgeD0iNSIgc3R5bGU9ImZvbnQtc2l6ZToxMHB4O2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmO2ZvbnQtc3R5bGU6bm9ybWFsO2NvbG9yOiMwMDA7ZmlsbDojMDAwOyIgeT0iMTUiPjx0c3BhbiB4PSI1IiB5PSIxNSIgY2xhc3M9ImhpZ2hjaGFydHMtdGV4dC1vdXRsaW5lIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMnB4IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj50PC90c3Bhbj48dHNwYW4geD0iNSIgZHk9IjEzIiBjbGFzcz0iaGlnaGNoYXJ0cy10ZXh0LW91dGxpbmUiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIycHgiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjEwNSwyMDAuMDA8L3RzcGFuPjx0c3BhbiB4PSI1IiBkeT0iMTMiIGNsYXNzPSJoaWdoY2hhcnRzLXRleHQtb3V0bGluZSIgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjJweCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+NC4xNyU8L3RzcGFuPjx0c3BhbiB4PSI1IiB5PSIxNSI+dDwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyI+MTA1LDIwMC4wMDwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyI+NC4xNyU8L3RzcGFuPjwvdGV4dD48L2c+PGcgY2xhc3M9ImhpZ2hjaGFydHMtbGFiZWwgaGlnaGNoYXJ0cy1kYXRhLWxhYmVsIGhpZ2hjaGFydHMtZGF0YS1sYWJlbC1jb2xvci0xICIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTA4LDIzMikiPjx0ZXh0IHg9IjUiIHN0eWxlPSJmb250LXNpemU6MTBweDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZjtmb250LXN0eWxlOm5vcm1hbDtjb2xvcjojMDAwO2ZpbGw6IzAwMDsiIHk9IjE1Ij48dHNwYW4geD0iNSIgeT0iMTUiIGNsYXNzPSJoaWdoY2hhcnRzLXRleHQtb3V0bGluZSIgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjJweCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+bzwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyIgY2xhc3M9ImhpZ2hjaGFydHMtdGV4dC1vdXRsaW5lIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMnB4IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4xLDU3OSwwOTYuMDA8L3RzcGFuPjx0c3BhbiB4PSI1IiBkeT0iMTMiIGNsYXNzPSJoaWdoY2hhcnRzLXRleHQtb3V0bGluZSIgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjJweCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+NjIuNjQlPC90c3Bhbj48dHNwYW4geD0iNSIgeT0iMTUiPm88L3RzcGFuPjx0c3BhbiB4PSI1IiBkeT0iMTMiPjEsNTc5LDA5Ni4wMDwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyI+NjIuNjQlPC90c3Bhbj48L3RleHQ+PC9nPjxnIGNsYXNzPSJoaWdoY2hhcnRzLWxhYmVsIGhpZ2hjaGFydHMtZGF0YS1sYWJlbCBoaWdoY2hhcnRzLWRhdGEtbGFiZWwtY29sb3ItMiAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4MywxNzMpIj48dGV4dCB4PSI1IiBzdHlsZT0iZm9udC1zaXplOjEwcHg7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIHNhbnMtc2VyaWY7Zm9udC1zdHlsZTpub3JtYWw7Y29sb3I6IzAwMDtmaWxsOiMwMDA7IiB5PSIxNSI+PHRzcGFuIHg9IjUiIHk9IjE1IiBjbGFzcz0iaGlnaGNoYXJ0cy10ZXh0LW91dGxpbmUiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIycHgiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPmY8L3RzcGFuPjx0c3BhbiB4PSI1IiBkeT0iMTMiIGNsYXNzPSJoaWdoY2hhcnRzLXRleHQtb3V0bGluZSIgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjJweCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+MjY4LDY0Mi4wMDwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyIgY2xhc3M9ImhpZ2hjaGFydHMtdGV4dC1vdXRsaW5lIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMnB4IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4xMC42NiU8L3RzcGFuPjx0c3BhbiB4PSI1IiB5PSIxNSI+ZjwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyI+MjY4LDY0Mi4wMDwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyI+MTAuNjYlPC90c3Bhbj48L3RleHQ+PC9nPjxnIGNsYXNzPSJoaWdoY2hhcnRzLWxhYmVsIGhpZ2hjaGFydHMtZGF0YS1sYWJlbCBoaWdoY2hhcnRzLWRhdGEtbGFiZWwtY29sb3ItMyAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIyOSw0NSkiPjx0ZXh0IHg9IjUiIHN0eWxlPSJmb250LXNpemU6MTBweDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZjtmb250LXN0eWxlOm5vcm1hbDtjb2xvcjojMDAwO2ZpbGw6IzAwMDsiIHk9IjE1Ij48dHNwYW4geD0iNSIgeT0iMTUiIGNsYXNzPSJoaWdoY2hhcnRzLXRleHQtb3V0bGluZSIgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjJweCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+dDwvdHNwYW4+PHRzcGFuIHg9IjUiIGR5PSIxMyIgY2xhc3M9ImhpZ2hjaGFydHMtdGV4dC1vdXRsaW5lIiBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMnB4IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj41NjcsOTcyLjAwPC90c3Bhbj48dHNwYW4geD0iNSIgZHk9IjEzIiBjbGFzcz0iaGlnaGNoYXJ0cy10ZXh0LW91dGxpbmUiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIycHgiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjIyLjUzJTwvdHNwYW4+PHRzcGFuIHg9IjUiIHk9IjE1Ij50PC90c3Bhbj48dHNwYW4geD0iNSIgZHk9IjEzIj41NjcsOTcyLjAwPC90c3Bhbj48dHNwYW4geD0iNSIgZHk9IjEzIj4yMi41MyU8L3RzcGFuPjwvdGV4dD48L2c+PC9nPjwvc3ZnPjwvZGl2PjwvZGl2PjxkaXYgaWQ9ImdyYXBoMF9sZWdlbmQiIHN0eWxlPSJmb250LXNpemU6IDEwcHg7IGZvbnQtZmFtaWx5OiBBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmOyBmb250LXdlaWdodDogbm9ybWFsOyBmb250LXN0eWxlOiBub3JtYWw7IGNvbG9yOiByZ2IoMCwgMCwgMCk7Ij48ZGl2IHN0eWxlPSJkaXNwbGF5OiB0YWJsZTsgYm9yZGVyOiAxcHggc29saWQgcmdiKDIwNCwgMjA0LCAyMDQpOyBib3JkZXItY29sbGFwc2U6IHNlcGFyYXRlOyBib3JkZXItc3BhY2luZzogNXB4OyBtYXJnaW46IDBweCBhdXRvIDE1cHg7IGJhY2tncm91bmQtY29sb3I6IHJnYigyNTUsIDI1NSwgMjU1KTsiPjxkaXYgc3R5bGU9ImRpc3BsYXk6IHRhYmxlLXJvdzsiPjxkaXYgaW5kZXg9IjAiIGlzcmV2ZWFsZWQ9InRydWUiIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyI+PHNwYW4gc3R5bGU9ImRpc3BsYXk6IHRhYmxlLWNlbGw7IHdpZHRoOiAxOHB4OyBtYXJnaW4tcmlnaHQ6IDEwcHg7IHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7IGJhY2tncm91bmQtY29sb3I6IHJnYigxNDgsIDAsIDIxMSk7IGhlaWdodDogMTJweDsiPjwvc3Bhbj48c3BhbiBzdHlsZT0iZGlzcGxheTogdGFibGUtY2VsbDsgdmVydGljYWwtYWxpZ246IG1pZGRsZTsiPnQgLSB0aHJlZTwvc3Bhbj48L2Rpdj48ZGl2IGluZGV4PSIxIiBpc3JldmVhbGVkPSJ0cnVlIiBzdHlsZT0iZGlzcGxheTogdGFibGUtY2VsbDsiPjxzcGFuIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyB3aWR0aDogMThweDsgbWFyZ2luLXJpZ2h0OiAxMHB4OyB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoMjU1LCAwLCAwKTsgaGVpZ2h0OiAxMnB4OyI+PC9zcGFuPjxzcGFuIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOyI+byAtIG9uZTwvc3Bhbj48L2Rpdj48ZGl2IGluZGV4PSIyIiBpc3JldmVhbGVkPSJ0cnVlIiBzdHlsZT0iZGlzcGxheTogdGFibGUtY2VsbDsiPjxzcGFuIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyB3aWR0aDogMThweDsgbWFyZ2luLXJpZ2h0OiAxMHB4OyB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOyBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IoNzUsIDAsIDEzMCk7IGhlaWdodDogMTJweDsiPjwvc3Bhbj48c3BhbiBzdHlsZT0iZGlzcGxheTogdGFibGUtY2VsbDsgdmVydGljYWwtYWxpZ246IG1pZGRsZTsiPmYgLSBmb3VyPC9zcGFuPjwvZGl2PjxkaXYgaW5kZXg9IjMiIGlzcmV2ZWFsZWQ9InRydWUiIHN0eWxlPSJkaXNwbGF5OiB0YWJsZS1jZWxsOyI+PHNwYW4gc3R5bGU9ImRpc3BsYXk6IHRhYmxlLWNlbGw7IHdpZHRoOiAxOHB4OyBtYXJnaW4tcmlnaHQ6IDEwcHg7IHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7IGJhY2tncm91bmQtY29sb3I6IHJnYigyNTUsIDEyNywgMCk7IGhlaWdodDogMTJweDsiPjwvc3Bhbj48c3BhbiBzdHlsZT0iZGlzcGxheTogdGFibGUtY2VsbDsgdmVydGljYWwtYWxpZ246IG1pZGRsZTsiPnQgLSB0d288L3NwYW4+PC9kaXY+PC9kaXY+PC9kaXY+PC9kaXY+PC9kaXY+";

        function Jeff() {
            var img = new Image();
            document.body.appendChild(img);
            img.setAttribute("src",b64);
            img.onload = function() {
                // document.getElementsByTagName("body")[0].appendChild(this);
                console.log("image is loaded");
            };
            img.src = b64;
            // img.src = "http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg";
        }
        Jeff();
    })();
</script>

</html>

Terima kasih. Jeffrin.


person Jeffrin John    schedule 28.09.2017    source sumber
comment
Sekali sebuah pertanyaan mempunyai jawabannya, Anda tidak dapat mengubahnya sehingga jawabannya tidak lagi mencakupnya. Jika Anda memiliki pertanyaan lain, sebaiknya tanyakan secara terpisah. Anda selalu dapat menyertakan tautan ke pertanyaan ini dalam pertanyaan baru Anda jika Anda merasa itu akan menambah konteks.   -  person Robert Longson    schedule 29.09.2017
comment
oke maaf Robert. @RobertLongson   -  person Jeffrin John    schedule 29.09.2017


Jawaban (1)


Menetapkan string base64 dari svg sebagai src dari img pasti akan berhasil. Misalnya, coba string svg base64 sederhana di bawah ini:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMjAiIHN0cm9rZT0ib3JhbmdlIiBzdHJva2Utd2lkdGg9IjQiIGZpbGw9InllbGxvdyIgLz48L3N2Zz4=

Sepertinya masalahnya adalah svg Anda salah bentuk. Setelah mendekode dari base64, ada beberapa div yang mengelilinginya (misalnya judul, legenda). Jika Anda hanya mengambil grafik svg itu sendiri dan menyandikannya ke base64, itu akan berfungsi:

https://jsfiddle.net/b7kru6e0/

Dan Anda dapat menambahkan/menambahkan komponen lainnya sebagai html.

person J S    schedule 28.09.2017
comment
oh.. Oke, mengerti! Terima kasih J S untuk jawaban cepatnya. @J S - person Jeffrin John; 29.09.2017
comment
Hai J S, Silakan lihat EDIT 2 saya. @J S - person Jeffrin John; 29.09.2017