[Fixed] img in Angular load fine locally, but not on development server

Issue

I have this <img> which loads an image from the planeringskartaSrc variable, which works fine when the arrayBuffer image is passed as an input for the function arrayBufferToBase64 in my local environment. It also works fine to load the default image planeringskarta_notfound.png when the buffer to the function is null when I run the application on localhost. When I deploy the application to the development server the arrayBuffer image is passed as an input to the function loads which works just fine, but /assets/img/planeringskarta_notfound.png could not load in the application. For the project I have linked the assets folder like this in the angular.json file:

angular.json:

"assets": [
              "projects/up-client/src/assets",
              "projects/up-client/src/assets/icons/favicon.ico"
            ],

HTML:

<img (click)="previewPlaneringskarta()" class="planeringskarta" [src]="planeringskartaSrc"/>

TypeScript:

arrayBufferToBase64( buffer ) {
    let binary = '';
    const bytes = new Uint8Array( buffer );
    const len = bytes.byteLength;

    if (!buffer) {
      return this.planeringskartaSrc = "/assets/img/planeringskarta_notfound.png";
    }

    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode( bytes[ i ] );
    }

    const imageSrc = 'data:image/gif;base64,' + window.btoa( binary );
    this.planeringskartaSrc =  this.sanitization.bypassSecurityTrustUrl(imageSrc);
  }

Why does the image load locally but not on development server?

Solution

try removing slash at the start of src path like this "assets/img/planeringskarta_notfound.png"