Angular - img load fine locally, but not on development server

Question

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?

Is the image accessible "manually" (i.e. by navigating directly to the www.your.dev.hosting.com/assets/img/planeringskarta_notfound.png? Is the base-href set correctly for that environment? — TotallyNewb
– TotallyNewb, Commented Mar 25, 2021 at 13:19
I have this img which works fine in the development server in the project which also starts the src path from assets folder: icons: { filter: '<img src="assets/icons/filter.svg" alt="filter"/>', sortUnSort: '<span></span>, }, So the base-href should be right? — Filip Huhta
– Filip Huhta, Commented Mar 25, 2021 at 13:24

nadeem · Accepted Answer · 2021-03-25 18:05:17Z

2

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

answered Mar 25, 2021 at 18:05

nadeem

601 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Filip Huhta Over a year ago

I knew it was something litle that I missed thank you!

Collectives™ on Stack Overflow

Angular - img load fine locally, but not on development server

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related