角度2 img src在相对路径中

Question

johnpapa Angular 2样式指南建议逐个功能的方法.我明白了,你可以自制小角度组件,可以重复使用.

所以,我创建了一个我想在另一个项目中重用的组件,并把它放在它自己的文件夹中.我还添加了一个图像,我希望这个组件显示在同一个文件夹中,所以它都是自包含的.

<img class="logo" src="logo.png"/>

但是这会尝试从root加载图像localhost:3000/logo.png.

我想这意味着我必须实际使用图像的确切路径,但这不会破坏其他人可以在其他项目中重用的组件的整体想法吗？

对此有何建议？

编辑以澄清 我正在使用Angular 2快速入门中的文件夹结构,这意味着我的根文件夹是:

app/
node_modules/
index.html
package.json
tsconfig.json

所以,即使我使用path header/logo.png,它也不起作用.我必须做app/header/logo.png.这实际上是一条绝对路径,如果我添加一个前导斜杠:"/ app/header/logo.png",它实际上也同样有效.任何小于完整路径的东西都会破坏链接.意思是如果有人想要重复使用它们,则必须具有完全相同的文件夹结构.

我想这只是它的工作原理,我只是学习Angular 2,但在我看来我应该能够从组件文件夹中加载资源,就像我可以使用模板或css一样

Answer 1

我正在使用webpack,并且能够通过require将组件中的图像作为变量并在我的模板中使用它来克服此问题.

这是因为在捆绑阶段,webpack将加载资源并存储正确的URL,并在运行时调用require将获得传递给模板的正确URL.

例

使用以下目录结构

app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts

...
@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

<div>
    <img [src]="LOGO" />
</div>

不可否认,这会绑定组件和模板,但需要在组件中,以便webpack能够在捆绑时分析和加载它.

通过这种方法,我使用npm打包我的模块并安装并在另一个项目中使用它 - 它也使用webpack.

我还没有使用SystemJS进行测试.