Question

我有一个问题。在下面的代码中，当我将base64设置为src时，img.onload没有触发。但是当我将图像直接设置为src时，img.onload会被触发，而console.log会返回“image is loaded”。你能解释一下img.onload只有当它是一个图像而不是base64字符串时才会被触发的原因。另外，如何使base64字符串触发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>

谢谢。 Jeffrin。

Answer 1

将svg的base64字符串设置为src的{{1}}绝对可以正常工作。例如，尝试下面这个简单的base64 svg字符串：

img

看起来问题是你的svg是不正确的。从base64解码后，它周围有几个div（例如标题，图例）。如果您只是将图表svg本身并将其编码为base64，它将起作用：

https://jsfiddle.net/b7kru6e0/

您可以将其他组件作为html添加/附加。

如何将base64 svg字符串设置为图像标记src？

1 个答案: