I am currently working on Angular 5.2.1 and I am facing an issue with loading an image from a server using its source URL.
Here is the HTML code:
<img #image [src]="cover" class="img-fluid" alt="NO image">
And here is the TypeScript code in image-loader.component.ts file:
import { Component, OnInit, Input, AfterViewInit,ViewChild,ElementRef} from '@angular/core';
import { EventAccessService } from '../../../event/services/event-acces.service';
@Component({
selector: 'loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.scss']
})
export class EventCardComponent implements OnInit, AfterViewInit {
@Input('cover') cover: any;
@ViewChild("image", {read: ElementRef}) image: ElementRef;
constructor(private service: EventAccessService) {
}
ngOnInit() {}
ngAfterViewInit() {
console.log(this.image.nativeElement.currentSrc);
this.image.nativeElement.src=this.cover
console.log(this.image.nativeElement.src);
}
}
When checking Chrome console, it shows the following result:
The base URI http://localhost:4200/(which is concatenated to the variable cover (which contains the full link to the image), causing the image not to load properly.
If anyone can provide assistance or guidance on how to resolve this issue, it would be greatly appreciated!
EDIT:
Even after directly assigning cover to image.nativeElement.src within ngAfterViewInit, the issue still persists.