base64图像无法正确打印

Question

When I print $src I am getting following result:

echo $src;

Result:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTQyIiBoZWlnaHQ9IjkzIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDIgNzMgYyAtMC4wMiAtMC4xMiAtMSAtNC43NSAtMSAtNyBjIDAgLTIuMjUgMC40MyAtNC43IDEgLTcgYyAxLjc3IC03LjA5IDQuMzggLTEzLjc4IDYgLTIxIGMgMi4xMSAtOS40IDIuODMgLTE5LjA3IDUgLTI4IGMgMC43NSAtMy4wOSAyLjkxIC03LjkxIDQgLTkgYyAwLjQgLTAuNCAyLjYyIDEuMDkgMyAyIGMgMi40NCA1Ljg2IDMuODYgMTUuMjUgNyAyMiBjIDMuMzYgNy4yMiA4Ljc0IDE0Ljg3IDEzIDIxIGwgMyAyIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxNiA0MCBsIDggLTQiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDY3IDIgYyAwLjIxIDAuNjMgOC4zOSAyMy41MiAxMiAzNiBjIDUuMyAxOC4zNSAxNCA1NCAxNCA1NCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMTAyIDIxIGMgLTAuMDkgMC40MiAtMy4wNCAxNS44MiAtNSAyNCBjIC0xLjgyIDcuNjEgLTMuODIgMTUuMTggLTYgMjIgYyAtMC4zNSAxLjA4IC0yLjA4IDMgLTIgMyBjIDAuMDkgMCAxLjg4IC0yLjg0IDMgLTMgYyA2LjYxIC0wLjk0IDE3LjU4IC0yLjM2IDI1IC0xIGMgNy43MSAxLjQyIDI0IDEwIDI0IDEwIi8+PC9zdmc+

But if I print the $src inside tag image is not rendering properly. string 'data:' is automatically cutting off from the url.

<img src="image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTQyIiBoZWlnaHQ9IjkzIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDIgNzMgYyAtMC4wMiAtMC4xMiAtMSAtNC43NSAtMSAtNyBjIDAgLTIuMjUgMC40MyAtNC43IDEgLTcgYyAxLjc3IC03LjA5IDQuMzggLTEzLjc4IDYgLTIxIGMgMi4xMSAtOS40IDIuODMgLTE5LjA3IDUgLTI4IGMgMC43NSAtMy4wOSAyLjkxIC03LjkxIDQgLTkgYyAwLjQgLTAuNCAyLjYyIDEuMDkgMyAyIGMgMi40NCA1Ljg2IDMuODYgMTUuMjUgNyAyMiBjIDMuMzYgNy4yMiA4Ljc0IDE0Ljg3IDEzIDIxIGwgMyAyIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxNiA0MCBsIDggLTQiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDY3IDIgYyAwLjIxIDAuNjMgOC4zOSAyMy41MiAxMiAzNiBjIDUuMyAxOC4zNSAxNCA1NCAxNCA1NCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMTAyIDIxIGMgLTAuMDkgMC40MiAtMy4wNCAxNS44MiAtNSAyNCBjIC0xLjgyIDcuNjEgLTMuODIgMTUuMTggLTYgMjIgYyAtMC4zNSAxLjA4IC0yLjA4IDMgLTIgMyBjIDAuMDkgMCAxLjg4IC0yLjg0IDMgLTMgYyA2LjYxIC0wLjk0IDE3LjU4IC0yLjM2IDI1IC0xIGMgNy43MSAxLjQyIDI0IDEwIDI0IDEwIi8+PC9zdmc+">

Answer 1

your missing the data: in your src attribute you need that for it to render properly ...

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTQyIiBoZWlnaHQ9IjkzIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDIgNzMgYyAtMC4wMiAtMC4xMiAtMSAtNC43NSAtMSAtNyBjIDAgLTIuMjUgMC40MyAtNC43IDEgLTcgYyAxLjc3IC03LjA5IDQuMzggLTEzLjc4IDYgLTIxIGMgMi4xMSAtOS40IDIuODMgLTE5LjA3IDUgLTI4IGMgMC43NSAtMy4wOSAyLjkxIC03LjkxIDQgLTkgYyAwLjQgLTAuNCAyLjYyIDEuMDkgMyAyIGMgMi40NCA1Ljg2IDMuODYgMTUuMjUgNyAyMiBjIDMuMzYgNy4yMiA4Ljc0IDE0Ljg3IDEzIDIxIGwgMyAyIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxNiA0MCBsIDggLTQiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDY3IDIgYyAwLjIxIDAuNjMgOC4zOSAyMy41MiAxMiAzNiBjIDUuMyAxOC4zNSAxNCA1NCAxNCA1NCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMTAyIDIxIGMgLTAuMDkgMC40MiAtMy4wNCAxNS44MiAtNSAyNCBjIC0xLjgyIDcuNjEgLTMuODIgMTUuMTggLTYgMjIgYyAtMC4zNSAxLjA4IC0yLjA4IDMgLTIgMyBjIDAuMDkgMCAxLjg4IC0yLjg0IDMgLTMgYyA2LjYxIC0wLjk0IDE3LjU4IC0yLjM2IDI1IC0xIGMgNy43MSAxLjQyIDI0IDEwIDI0IDEwIi8+PC9zdmc+" />

I don't see how that would be getting cut off.

Answer 2

I've tested this both ways, and it works. If it's not working for you something else is going on.

If you are echoing the image, using PHP, try;

$src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMTQyIiBoZWlnaHQ9IjkzIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDIgNzMgYyAtMC4wMiAtMC4xMiAtMSAtNC43NSAtMSAtNyBjIDAgLTIuMjUgMC40MyAtNC43IDEgLTcgYyAxLjc3IC03LjA5IDQuMzggLTEzLjc4IDYgLTIxIGMgMi4xMSAtOS40IDIuODMgLTE5LjA3IDUgLTI4IGMgMC43NSAtMy4wOSAyLjkxIC03LjkxIDQgLTkgYyAwLjQgLTAuNCAyLjYyIDEuMDkgMyAyIGMgMi40NCA1Ljg2IDMuODYgMTUuMjUgNyAyMiBjIDMuMzYgNy4yMiA4Ljc0IDE0Ljg3IDEzIDIxIGwgMyAyIi8+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxNiA0MCBsIDggLTQiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNIDY3IDIgYyAwLjIxIDAuNjMgOC4zOSAyMy41MiAxMiAzNiBjIDUuMyAxOC4zNSAxNCA1NCAxNCA1NCIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gMTAyIDIxIGMgLTAuMDkgMC40MiAtMy4wNCAxNS44MiAtNSAyNCBjIC0xLjgyIDcuNjEgLTMuODIgMTUuMTggLTYgMjIgYyAtMC4zNSAxLjA4IC0yLjA4IDMgLTIgMyBjIDAuMDkgMCAxLjg4IC0yLjg0IDMgLTMgYyA2LjYxIC0wLjk0IDE3LjU4IC0yLjM2IDI1IC0xIGMgNy43MSAxLjQyIDI0IDEwIDI0IDEwIi8+PC9zdmc+';

echo '<img src="'.$src.'">';

---

If you are calling the image up in the body of the page,, the following should work:

 <?php $src = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+++PC9zdmc+'; ?> <img src="<?php echo $src; ?>">