Retrieving BLOB image from database using autocomplete selection

I’m trying to display a blob image stored in a database, I’m not getting any errors but the image isn’t displaying, I’m just getting the default “no image” icon. Here’s my code:

<script>
  function showEmpimg(str) {
    var xhttp;
    if (str == "") {
      document.getElementById("user-id").innerHTML = "";
      return;
    }
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
      document.getElementById("face").innerHTML = this.responseText;
      }
    };
    xhttp.open("POST", "getimage.php?q="+str, true);
    xhttp.send();
  }
</script>
</head>
<body>
  <div id="face" class="face"> 
  </div>
  <input type="text" class="form-control" id="user-id" placeholder="ID" name="emp_id" onchange="showEmpimg(this.value)" required maxlength="6" />

And the php file:

<?php

$db = mysqli_connect("localhost","root","test1","dar");
$sql = "SELECT emp_img FROM employees WHERE emp_id LIKE 'q'";
$sth = $db->query($sql);
$result=mysqli_fetch_array($sth);
echo '<img src="data:image/jpeg;base64,'.base64_encode( $result['emp_img'] ).'"/>';

?>

Any ideas?

How are you storing the image into the database?

Do you absolutely have to store images (any binary file) in the database? It’s considered really bad practice as a blob of data has no real use in a relational database as you can’t query it in any sensible way. The recommended method is to just store the filename (and optionally path/host) to the database and serve it from the file system

What does your output HTML look like? Particularly the <img> tag.

Sponsor our Newsletter | Privacy Policy | Terms of Service