title: Base64 image doesn't show when using PHP
body: <p>I need to display an image which is in Base64 format. When I build the img tag in PHP it doesn't show the image (just the defualt 'broken image' icon). When I view the page source and click on the Base64 data is shows the picture as expected. Also, if I copy and paste the page source and save it as an HTML file it displays as expected. I also tried a random image and that worked however as my image works from a .html file I assume it is OK and should work?</p>
  
  <p>The .php code:</p>
  
  <pre><code>header('content-type: text/html');
  
  ...
  
  echo "&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;";
  echo "Name = $name&lt;br/&gt;";
  echo "&lt;img src=\"data:image/jpg;base64,$photo\"/&gt;";
  echo "&lt;/body&gt;&lt;/html&gt;";
  </code></pre>
  
  <p>The HTML from View Source:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;Name = Andrea Pilipczuk&lt;br/&gt;
  &lt;img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAyADIAA...{too big to fit here].../9k="/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>EDIT:</p>
  
  <p>This didn't come up in View Source but digging around Chrome, I inspected the image element and found at the end was "9k=�������". Is this some kind of padding? When I edited the element to remove these the image showed up as expected.</p>
  
  <p>The following code removes the random characters and displays the image correctly but seems a bit hacky, would obviously prefer to solve the underlying issue.</p>
  
  <pre><code>$unpadded = explode("=", $photo);
  $padding = strlen($unpadded[0]) % 3;
  $padded = $unpadded[0];
  while ($padding &gt; 0) {
    $padded .= "=";
    $padding--;
  }
  echo "&lt;img src=\"data:image/jpeg;base64,$padded\"/&gt;";
  </code></pre>