来自快速服务器的图像的 Angular 5 net::ERR_UNKNOWN_URL_SCHEME

Posted 2023-03-07

【中文标题】来自快速服务器的图像的 Angular 5 net::ERR_UNKNOWN_URL_SCHEME

【英文标题】：Angular 5 net::ERR_UNKNOWN_URL_SCHEME for image from express server

【发布时间】：2018-12-09 07:21:36

【问题描述】：

我在显示来自我的 node.js（快速服务器）localhost:3000/assets/images/uploads 的图像时遇到了一些问题。当我在浏览器中输入此 URL 时，这工作正常，浏览器显示图像但是当我将它分配给我的 Angular 5 应用程序中的一个变量并使用绑定到 时，我得到 ​​p>

加载资源失败：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>

【问题讨论】：

浏览器在地址栏输入localhost:3000/assets/images/uploads时会在开头添加http://。这不会在您的代码中发生。您需要提供一个有效的 URL 和协议。

【参考方案1】：

解决方案！

对于遇到此问题的任何人，请确保您在图像源属性中提供的地址附加了“http://”，因为在我的情况下我没有附加它。 这解决了我的问题，现在它就像一个魅力！

你的网址一定是这样的：“http://localhost:3000/assets/images/uploads/c91a3649fc432040e54b9179a72539ad1530343409773.png”

实际上令人困惑的部分是，当您在浏览器的 url 中编写它时，如果没有 http://，它会自动附加它而不让我们知道，但这不是对于 Angular，您必须明确地编写它。 快乐编码。 我希望这对某人有所帮助，因为我花了 14 个小时才弄清楚。