title: Send a Base64/BLOB image data from PHP to Javascript
body: <p><strong>TL;DR</strong></p>
  
  <p>Is there a way to send a directly usable base64/BLOB image data to javascript?</p>
  
  <p>I'm trying to send an array(containing string &amp; img) to my Vue component from my <strong>page.blade.php</strong> returned from my controller in Laravel.</p>
  
  <p><strong>MORE DETAILS</strong></p>
  
  <p>I know data encoding is my problem and <code>json_encode($my_string_data)</code> only works for UTF-8 but not the IMG data. <code>json_encode($my_image_data)</code> will throw an error <code>malformed utf-8 characters possibly incorrectly encoded image</code>.</p>
  
  <p>I am making 1 request then 2 DB queries in my controller and combining both responses(string &amp; MEDIUMBLOB/img data) then return it as an array to my <strong>blade.php</strong>, in my blade file is the vue component taking in the img data as props. </p>
  
  <p>Possible solutions I wanna know how:</p>
  
  <ol>
  <li>How do I do make this img data directly usable by javascript? </li>
  <li>If <strong>#1</strong> is not possible, how do I convert this img data directly readable by javascript?</li>
  <li>If <strong>#2</strong> is not possible, how do I convert this img data JSON-able by
  <code>json_encode($my_image_data)</code> ?</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/KlKne.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KlKne.png" alt="enter image description here"></a></p>
  
  <p>I'm only assuming that the IMG data returned by the database from a BLOB column is Base64, <code>mb_detect_encoding()</code>-ing the variable containing IMG data always returns false so I cannot know what is it in the first place. All I know Is must convert this data to UTF-8 or anything JSON-able for JS to use.</p>
  
  <p>ATM, I'm still trying to make solution #3. </p>