title: get image from backend api and display in angular
body: <p>I want display image in angularV10 and get it from backend and I don't know why image not display and got error I'm looking for how to solve but I don't get answer
  please can someone guide me</p>
  <p>back-end:</p>
  <pre class="lang-js prettyprint-override"><code>     get_image:async(req,res,next)=&gt;{
          Image.findAll().then(data=&gt;{
            res.send(data)
          }) }
  </code></pre>
  <p>api:</p>
  <pre class="lang-js prettyprint-override"><code>    router.get(&quot;/get_image&quot;,uploadController.get_image)
  </code></pre>
  <p>Front-end Angular : service.ts</p>
  <pre class="lang-js prettyprint-override"><code>    get_file(): Observable&lt;any&gt;{
        return this.http.get(baseUrl + '/get_image'  , { responseType: 'Blob' as 'json' })}
  </code></pre>
  <p>code:</p>
  <pre class="lang-js prettyprint-override"><code>      createImageFromBlob(image: Blob) {
           let reader = new FileReader();
           reader.addEventListener(&quot;load&quot;, () =&gt; {
              this.imageToShow = reader.result; &lt;&lt;&lt; this.imageToShow
           }, false);
        
           if (image) {
              reader.readAsDataURL(image);
              console.log(image)
           }
        }
      
        get_image():void{
      this.AddFileService.get_file().subscribe(data=&gt;{
        this.createImageFromBlob(data);
      console.log(data)
      })}
  </code></pre>
  <p>html:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;img [src]=&quot;imageToShow &quot;/&gt;
  </code></pre>
  <p>Error :</p>
  <p>big error</p>
  <pre><code>unsafe:data:application/json;base64, ..... alot of chars i don't under stand 
  </code></pre>
  <p><img src="https://i.stack.imgur.com/lYw5A.png" alt="here table of image in mysql" /></p>