title: Blob image from database to Java and from Java to Javascript Image
body: <p>I have Blob, which stored in db and i take it from database with java server like this:</p>
  
  <p><strong>Entity.java</strong></p>
  
  <pre><code>@Column(name = "img")
  private Blob img;
  
  public Blob getImg() {
      return img;
  }
  public void setImg(Blob img) {
      this.img = img;
  }
  </code></pre>
  
  <p><strong>Repository.java</strong></p>
  
  <pre><code>@Transactional
  @Query(value = "SELECT img FROM articles WHERE category = ?", nativeQuery = true)
  //Blob findP(String category);
  
  Blob findPic(String category);
  </code></pre>
  
  <p><strong>Controller.java</strong></p>
  
  <pre><code>@RequestMapping(value="/Pic_test")
  @ResponseBody
  public Blob getPics() throws SQLException, IOException {
  
      return remindRepository.findPic("Java");
  }
  </code></pre>
  
  <p>Then I receive it with Javascript to image it:</p>
  
  <pre><code>    function toDataURL(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
      var reader = new FileReader();
      reader.onloadend = function() {
        callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
  }
  
  toDataURL('http://localhost:8080/articles/Pic_test', function(dataUrl) {
      var display = document.getElementById('display');
    var url = window.URL.createObjectURL(new Blob([dataUrl]));
  var img = new Image();
  img.src = url;
  document.getElementById("demo").innerHTML = img.src;
  })
  </code></pre>
  
  <p>However, if I call my "img" Blob in java code, i have an error in server, but if I call it byte[], my picture is not shown just. </p>