Arraybuffer is not assinable to type string, Angular. I am trying to show uploaded image on the page

Question

I've used a snipped to show the image that the user selected. The code worked but on the editor I get an error on the line shown below. I knew as soon as I stopped the development server and run it again it wouldn't compile anymore, And that happened.

 srcFotos: Array<string>;



onFileSelect(event, index) {


      if (event.target.files && event.target.files[0]) {
          const file = event.target.files[0];
  
          const reader = new FileReader();
          reader.onload = e => {
            alert(reader.result);

           this.srcFotos[index] =  reader.result; //Arraybuffer is not assinable to type string
          };
  
          reader.readAsDataURL(file);
      }
     
   

    }

on template

     <img [src]="srcFotos[1]" class="img-fluid">

Like I said the code was working like expected, I selected the image and it appeared on the page despite of the error.

Answer 1

You can coerce the compiler to see it as a string with as

this.srcFotos[index] = reader.result as string;