Angular 5 net::ERR_UNKNOWN_URL_SCHEME pour une image provenant d'un serveur express

Question

J'ai des problèmes pour afficher une image depuis mon node.js (serveur express) localhost:3000/assets/images/uploads. Cela fonctionne bien lorsque j'entre cette URL dans le navigateur, le navigateur affiche l'image mais lorsque j'assigne cette URL à une variable dans mon application Angular 5 et que j'utilise le binding pour l'image, j'obtiens

Échec du chargement de la ressource : net::ERR_UNKNOWN_URL_SCHEME.

Je joins le code ci-dessous. Veuillez l'examiner.

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>

Answer 1

SOLUTION !

Si vous rencontrez ce problème, assurez-vous que l'adresse que vous indiquez dans l'attribut source de l'image est accompagnée de "http://", car dans mon cas, je ne l'avais pas ajoutée. Cela a résolu le problème pour moi et cela fonctionne maintenant comme un charme !

votre URL doit ressembler à ceci : " http://localhost:3000/assets/images/uploads/c91a3649fc432040e54b9179a72539ad1530343409773.png "

Ce qui est déroutant en fait, c'est que lorsque vous l'écrivez dans l'url du navigateur, sans http:// il l'ajoute automatiquement sans nous le faire savoir mais ce n'est pas le cas avec Angular, il faut l'écrire explicitement. Bon codage. J'espère que cela aidera quelqu'un, car il m'a fallu 14 heures pour comprendre.