node.js - 来自快速服务器的图像的 Angular 5 net::ERR_UNKNOWN_URL_SCHEME
问题描述
我在显示来自我的 node.js(快速服务器)localhost:3000/assets/images/uploads 的图像时遇到了一些问题。当我在浏览器中输入此 URL 时,这工作正常,浏览器显示图像但是当我将它分配给我的 Angular 5 应用程序中的变量并使用绑定到 时,我得到
未能加载资源:net::ERR_UNKNOWN_URL_SCHEME。
我附上下面的代码。请审查它。
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>
解决方案
解决方案!
对于遇到此问题的任何人,请确保您在图像源属性中提供的地址附加了“http://”,因为在我的情况下我没有附加它。这解决了我的问题,现在它就像一个魅力!
你的网址一定是这样的:“ http://localhost:3000/assets/images/uploads/c91a3649fc432040e54b9179a72539ad1530343409773.png ”
令人困惑的部分实际上是,当您在浏览器的 url 中编写它时,没有http://,它会自动附加它而不让我们知道,但 Angular 不是这种情况,您必须明确编写它。快乐编码。我希望这对某人有所帮助,因为我花了 14 个小时才弄清楚。
推荐阅读
- python - 将音频文件转换为频谱图,然后将频谱图的数据保存到 txt 文件中
- java - 将 h2 数据库实现到现有的 spring-boot 应用程序
- reactjs - 如何使用 React HashRouter 作为路由参数?
- unreal-engine4 - Unity gameObject.parent 的 Unreal 等价物是什么?
- mysql - 创建一个返回 John Daniel 的函数 2009 年 12 月 6 日
- ruby-on-rails - 如果对象为空,则获取属性的更好方法
- image - Matlab上从灰度图像中提取区域像素的问题
- c# - 如何访问列表
类从接口继承时的对象属性? - python - 迭代生成键并计算字数
- python - 如何在 /apps for Python 中设置 pandas 库的路径,安装在 /opt 在 linux redhat 中