base64 svg 문자열을 이미지 태그 src로 설정하는 방법은 무엇입니까?

질문이 있습니다. 아래 코드에서 base64를 src로 설정하면 img.onload가 실행되지 않습니다. 그러나 src에 직접 이미지를 설정하면 img.onload가 실행되고 console.log는 "image is loaded"를 반환합니다. img.onload가 base64 문자열이 아닌 이미지 일 때만 해고 당할 이유를 설명해 주시겠습니까? 또한 base64 문자열을 만드는 방법 img.onload.base64 svg 문자열을 이미지 태그 src로 설정하는 방법은 무엇입니까?

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

감사합니다. 제프린.

출처

2017-09-28 Jeffrin John

질문에 답변이 있으면 실제로 답변을 변경할 수 없으므로 답변에서 더 이상 문제가 해결되지 않습니다. 더 많은 질문이 있으시면 별도로 질문하십시오. 문맥을 추가 할 것으로 생각되면이 질문에 대한 링크를 항상 새 질문에 포함 할 수 있습니다. –

ok 죄송합니다. @ RobertLongson –

src이 img 인 svg의 기본 64 문자열을 설정해야합니다. 예를 들어, 아래 간단한 base64로 SVG 문자열을 시도 : 그것은 문제처럼 보인다

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

은 SVG가 잘못 형성되어 있다는 점이다. base64에서 디코딩 한 후에는 몇 개의 div로 둘러 쌉니다 (예 : 제목, 범례).

https://jsfiddle.net/b7kru6e0/

을 그리고 당신은/앞에 추가 HTML로 다른 구성 요소를 추가 할 수 있습니다 : 당신은 그냥 차트 SVG 자체를 가지고베이스 64로 인코딩하면 작동합니다.

출처

2017-09-28 23:12:31

오 .. 알았어! 빠른 답변을 주셔서 감사합니다. @J S –

안녕하세요, 제발 내 편집 좀 봐주세요. 2 @J S –

base64 svg 문자열을 이미지 태그 src로 설정하는 방법은 무엇입니까?

답변

관련 문제