Angular 5 net::ERR_UNKNOWN_URL_SCHEME for image from express server
SOLUTION!
For anyone having this issue, please make sure that the address you are providing in the image source attribute is appended with "http://", as in my case I was not appending it. This solved the problem for me and now it works like a charm!
you're url must be somewhat like this : "http://localhost:3000/assets/images/uploads/c91a3649fc432040e54b9179a72539ad1530343409773.png"
The confusing part actually was that when you write it in the browser's url, without http://, it automatically appends it without letting us know but this isn't the case with Angular, you have to explicitly write it. Happy Coding. I hope this helps someone as it took me 14 hours to figure out.
enigcreator
Updated on July 14, 2022Comments
-
enigcreator almost 2 years
I am having some trouble displaying an image from my node.js (express server) localhost:3000/assets/images/uploads. This works fine when I enter this URL in the browser, the browser display the image but when I assign this to a variable in my Angular 5 app and use binding to the , I get
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME.
I am attaching the code below. Please review it.
export class ProfileComponent implements OnInit { user: any; url: ""; path: SafeUrl; public uploader:FileUploader = new FileUploader({url: URL, itemAlias: 'photo'}); constructor(private authService: AuthServiceService, private userService: UsersService, private http: Http, private el: ElementRef, private _DomSanitizationService: DomSanitizer) { } ngOnInit() { this.user = this.authService.user; console.log(this.user); this.path = this._DomSanitizationService.bypassSecurityTrustUrl(this.user.img);
<input type="file" name="photo" ng2FileSelect [uploader]="uploader" /> <!-- button to trigger the file upload when submitted --> <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"> Upload with ng-2 file uploader </button> <div class="user profile"> <div class="ui container"> <div class="ui grid"> <div class="ui five wide column"> <div class="ui card"> <a class="image poping up" href="" id="profile-avatar" data-content="avatar" data-variation="inverted tiny" data-position="bottom center"> <img [src] = "path" target="_blank" title="Hamza"/> </a> <div class="content"> <span class="header text center">Hamza</span> <span class="username text center">Hamza</span> </div> <div class="extra content"> <ul class="text black"> <li><i class="octicon octicon-location"></i> Lahore</li> <li> <i class="octicon octicon-mail"></i> <a href="" rel="nofollow">email</a> </li> <li><i class="octicon octicon-clock"></i> date</li> </ul> </div> </div> </div> <div class="ui eleven wide column"> <div class="ui secondary pointing menu"> <a class="activity"> <i class="octicon octicon-repo"></i> Posts </a> <a class="item"> <a class="activity"> <i class="octicon octicon-rss"></i> Top Posts </a> </a> </div> </div> </div> </div> </div>