Embedding image data inline html - php

Question

I'm trying to embed an image with it's data inline.however when I don't encode my data as base64 it doesn't work and some random characters are displayed.here are the two variations in php:
....
//$img-->image data read from database
$data = stream_get_contents($img);
$data64 = base64_encode($data);//when I don't use this it doesn't work
$image64 = '<img src="data:image/jpeg;base64,'.$data64.'>';
$image = '<img src="data:image/jpeg,'.$data.'>';
$img64 works but `$img' doesn't.what's the problem?

Answer 1

That's to be expected. JPEG data will naturally contain > and " and other HTML metacharacters. As soon as a " and then > are encounter, your browser will think the <img> tag has been closed, and everything else will be treated as text
e.g, if you don't base64_encode, you'll get something like
<img src="data:image/jpeg,randomgarbagewitha"andthena>andsome more random garbage">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
the binary contents of the jpg here
^--end of src attribute
^---end of img tag