本文介绍了相对路径在 Angular2 组件中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在 Angular 2 的组件(导航栏)中未加载徽标
导航栏组件文件:
import { Component, OnInit } from '@angular/core';@成分({模块 ID:module.id,选择器:应用程序导航栏",templateUrl: './navbar.component.html',styleUrls: ['./navbar.component.css']})导出类 NavbarComponent 实现 OnInit {私人网站:字符串私人网站网址:字符串构造函数(){this.website = 'Rakesh'this.websiteUrl = 'http://google.com'}ngOnInit() {}}
我在模板文件中添加了一些 html 代码,但没有加载徽标
我的徽标代码是
<a class="navbar-brand";href={{websiteUrl}}">*<img src="./logo/rakesh.png";class="img-responsive";alt=图像">*</a>
控制台输出moduleId 应该是NavbarComponent"中的一个字符串
.
我的徽标路径:
navabar.component.ts标识/rakesh.png
解决方案
问题可能来自 moduleId 应该是 "NavbarComponent" 中的一个字符串
.
由于 Angular CLI 现在使用 Webpack,Webpack 中的 module.id 是一个数字,而 Angular 需要一个字符串.您应该做的是删除 moduleId
元数据.
@Component({选择器:应用程序导航栏",templateUrl: './navbar.component.html',styleUrls: ['./navbar.component.css']})
Logo not loading in Angular 2 in a component (Navbar)
navbar component file:
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
private website:string
private websiteUrl:string
constructor() {
this.website = 'Rakesh'
this.websiteUrl = 'http://google.com'
}
ngOnInit() {
}
}
i add some html code in template file and the logo not loading
my logo code is
<div class="navbar-header">
<a class="navbar-brand" href="{{websiteUrl}}">
*<img src="./logo/rakesh.png" class="img-responsive" alt="Image">*
</a>
</div>
Output in consolemoduleId should be a string in "NavbarComponent"
.
my Logo path:
navabar.component.ts
logo/
rakesh.png
解决方案
Problem maybe comes from moduleId should be a string in "NavbarComponent"
.
As Angular CLI now use Webpack, module.id in Webpack is a number, while Angular expects a string. What you should do is remove the moduleId
metadata.
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
这篇关于相对路径在 Angular2 组件中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!