title: WARNING: sanitizing unsafe URL value data:text/html;base64,
body: <p>I am getting a response from the server in the form of image, which I am accepting as a blob and converting it to image</p>
  <p>template:</p>
  <pre><code>&lt;img  [src]=&quot;imgSrc&quot;  alt=&quot;Loading....&quot;&gt;
  </code></pre>
  <p>ts file:</p>
  <pre><code>createImageFromBlob(image: Blob) {
       let reader = new FileReader();
       reader.addEventListener(&quot;load&quot;, () =&gt; {
      
  
        this.imgSrc=reader.result;
       }, false);
    
       if (image) {
          reader.readAsDataURL(image);
       }
    }
  
  this.createImageFromBlob(data) //data is the response from the server
  
  </code></pre>
  <p>It is giving me WARNING: sanitizing unsafe URL value data:text/html;base64.</p>
  <p>Using DomSanitizer bypassSecurityTrust  gives the error of argument String | ArrayBuffer not assignable to type string</p>
  <pre><code>createImageFromBlob(image: Blob) {
       let reader = new FileReader();
       reader.addEventListener(&quot;load&quot;, () =&gt; {
      
  
        this.imgSrc=this.sanitizer.bypassSecurityTrustResourceUrl(reader.result); //error here
       }, false);
    
       if (image) {
          reader.readAsDataURL(image);
       }
    }
  </code></pre>
  <p>How can I bypass angular security in case of blob to Image</p>
  <p>Solution:
  The problem was in the reader.result, it was not giving a valid image, so I had to fetch the image as an array-buffer in the back-end and then  send it to the front-end in order to get the correct image.</p>
  <p>Actually my backend is first fetching the image from  another site and then sending it to the frontend.</p>