Angular12 img src binding generates data-src in template

Question

I'm getting from my backend an image (in blob) which I need to display in an img tag.

template.html

<img class="image" [src]="selectedImage.imageStream" />

component.ts

getDocument(requestPath: string): Observable < any > {
    return this.http.get(`${Config.apiRoot.uri}${requestPath}`, {
      responseType: 'blob'
      as 'json'
    })
  }

  ** ** ** **

  getAndAssignImage() {
    this.getDocument(this.selectedImage.imageSrc).subscribe({
      next: (streamResp) => {

        const imageStreamReader = new FileReader();

        imageStreamReader.addEventListener('load', () => {
          this.selectedImage.imageStream = imageStreamReader.result;
        }, false);

        imageStreamReader.readAsDataURL(streamResp);
      }
    });
  }

Somehow, even if I'm binding to src property, the generated html has the base64 image in the data-src attribute:

<img _ngcontent-btp-c316="" class="image ng-star-inserted" data-src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD...">

Somehow the image is not displayed and I guess it's because the base64 is set in the data-src attribute instead of the src property, which I'm binding.

I've already checked the base64 is valid and copy/pasting it in a plain html file with just the img src display the image.

What's the problem? Why the img tag has my base64 string in the data-src attribute instead of src?

Answer 1

After a lot of research we found the issue. We are using OneTrust and the auto blocking feature was preventing the image to display.

The specifics are here and here but the fix for us was just adding the data-ot-ignore and the optanon-category class in order to prevent the OneTrust blocker to mess with this image tag. So the image tag in the end looked like this:

<img data-ot-ignore class="image optanon-category" [src]="selectedImage.imageStream" />

You can find how to fix videoplayer issues here