Angular 2 image Base64 how to use?

Asked

Viewed 480 times

0

I have a "ERR_INVALID_URL" error and does not load the image. Does anyone know how to solve ? My html and Ts are like this. 

//Aqui está vindo a url do servidor 
    let a = value.params["dataBuffer"]; 

    //Aqui estou convertendo o base64 passando para 
      variavel imagePath q é do tipo any;
    this.imagemPath = this.sanitizer.bypassSecurityTrustResourceUrl("data:image/png;base64, a");



   ----- No meu arquivo HTML -----------
    <img [src]="imagemPath">
javascript angular typescript angular-5
  • 1

    Which url is being passed?

  • 1

    @Herbertjunior I’m using https://www.base64-image.de/ .. It generates a huge url of type: data:image/png;Base64,iVBORw0KGgoAAAANSUhEUgACDQAAAFwCAYAAABNBblg.....

  • 1

    And when you paste in the browser, you can see the image normally?

  • 1

    Yes, I can see the image in the good browser.

  • 1

    @Herbertjunior No console shows this date:image/png;Base64 error, a:1 GET data:image/png;Base64, a net::ERR_INVALID_URL

  • Shouldn’t be: this.sanitizer.bypassSecurityTrustResourceUrl('data:image/png;base64, ' + a);? In your Voce code you are trying to use the a string as Base64.

  • @Herbertjunior Tested this way that you did here, now the url reaches the "a" but the same ERR_INVALID_URL error . Still not bringing the image. :(

  • Try using this tutorial http://www.manuelmeyer.net/2014/12/tooltip-decoding-base64-images-with-chrome-data-url/

  • What is the use of this? this.sanitizer.bypassSecurityTrustResourceUrl

Show 4 more comments

1 answer

0

Instead of using the resource sanitizer.bypassSecurityTrustResourceUrl you can put the Base64 code directly into the attribute src:

this.imagemPath = `data:image/png;base64, ${a}`;

Check if during your conversion to Base64 the return string already comes with the snippet 'data:image/png;base64, ', if it comes it will not be necessary to concatenate above

Browser other questions tagged javascript angular typescript angular-5

You are not signed in. Login or sign up in order to post.