Error: Get net::ERR_INVALID_URL Angular 13

user_16405839 0
Viewed 93

I'm loading products from server to Angular.And the imagepaths/images are attached with the products.The images are present at server port localhost:3000.And the path for images is ./assets/imagename.But the images are not visible and the console shows me the following error

enter image description here

Custom Pipe for safe url and Domsanitizer

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeurl',
})
export class SafeurlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(html: any) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(html);
  }

ngOnInit Getting all the products from server

results?: Book[];

 ngOnInit() {
    this.apiService.getallbooks().subscribe((data: Book[]) => {
      this.results = data;
      console.log(this.results);
    });
}

html code.I tried with both data:image/jpg;base64 and data:image/png;base64 but the results are same

<div class="grid" *ngFor="let result of results">
      <div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
        <div >
          <img
            class="image"
            [src]="'data:image/png;base64,' +'http://localhost:3000/'+result.coverimage | safeurl"
            alt=""
            height="400px"
            width="250px"
            style="border: 1px solid red"
          />
        </div>

The error still remain even if I don't use http://localhost:3000/ in src

angular
3 Answers

It seems to me that your URL is not correct. You currently have:

data:image/png;base64.http://localhost etc...

This is not a valid http format.

Can you verify this theory by hard-coding a test URL in the source ?

If it works it will allow us to validate that it is just a question of writing the URL.

https://localhost:3000/image/assets/image.png
user_124413990

You can try to use pipe in component.ts

.component.ts

constructor(...
            private safeurlPipe: SafeurlPipe) {
}

genImageUrl(coverimage: any): SafeResourceUrl {
    const safeResourceUrl = this.safeurlPipe.transform('data:image/png;base64,http://localhost:3000/' + coverimage);
    return safeResourceUrl;
}

.component.html

<div class="grid" *ngFor="let result of results">
  <div class="blog-card spring-fever" style="padding: 0.5rem; z-index: 100">
    <div *ngIf="image">
      <img
        class="image"
        [src]="genImageUrl(result.coverimage)"
        alt=""
        height="400px"
        width="250px"
        style="border: 1px solid red"
      />
    </div>
  </div>
</div>
user_116343810

So in my case I had a list of books and each book has path for its image. I was using ngFor and set the image src with the path. That is the right way. But the images were not visible and Network was showing images as text/html type. The actual issue here was not the type,the actual issue was in my URL.I had a folder in NestJs server by the name of assets,that is preset at root, and I had set the path for the images(in NestJs file upload code), like this ./assets/. That is also the correct way to set the destination folder.I was able to see the images at browser like this http://localhost:3000/imagename.png,and that means my server configured to server/serve my images over root URL that's why I can access them http://localhost:3000/imagename.png. But my api was returning images in a format that contains ./assets/ in the URL. So with the following code

<div *ngIf="result.coverimage">
          <img
            class="image"
            [src]="'data:image/png;base64,' +'http://localhost:3000/'+result.coverimage | safeurl"
            alt=""
            height="400px"
            width="250px"
            style="border: 1px solid red"
          />
        </div>

I am assuming that I'm hitting the Url like this http:localhost:3000/imagename.png. But actually Angular was seeing the URL like this http:localhost:3000/./assets/imagename.png. And this is note the correct URL Format. Urls don't work with . or ,.Also becasue my server is configured at root, this urlhttp;//localhost:3000/assets/imagename.png is also wrong.And root means that, whatever the thing is set at root, that is directly access able after your server's port number. Example http://localhost:YourServerPortNumber/TheThing_Set_at_Root.

So the solution for this issue is the following

src="http://localhost:3000/{{
              result.coverimage.replace('./assets/', '')
            }}"

With above .replace('./assets/', '') we are removing the ./assets/ and repalcing it with '' empty space. So now URL is in this formathttp://localhost:3000/imagename.png. Also I can remove safeurl pipe for now beacuse it is localhost,but in prodction mod I will be needing that pipe. And It might happen that even with localhost somebody might need the pipe.

I hope I understood the things myself correctly and explained them correctly

user_164058390
Related