角度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进行测试。

Answer 2

我会通过将src路径分成两部分来解决这个问题，如下所示：

<img class="logo" [src]="(imgPath + imgFileName)" />

然后，在组件定义中，您设置：

@Input() imgPath:string = "app/header/";
imgFileName:string = "logo.png";

通过使用@Input（）装饰器，可以在外部看到imgPath变量，以便在将组件移动到另一个位置时可以设置不同的路径，从而使组件可重用。

Answer 3

在根目录中使用包含徽标图像的资源文件夹

Answer 4

如果问题是404错误，则需要更改路径

来自路径/图像 （ 根/路径/图像 ， /路径/图像等）

到./path/image

如果没有任何其他问题，它应该工作。

Answer 5

看看这个答案： 如何在angular2中提供图像

关键是要么将其放入“assets”文件夹，要么编辑“.angular-cli.json”文件（资产部分）以包含图像所在的位置。 对于应该提供的其他资源（即样式表）也是如此。

Answer 6

@ David的解决方案稍微过时，因为现在angular2可以升级，它适用于2/3的anular。 对于角度4及以上，它会抛出不需要发现的错误，这是我修改它的方式，

header.component.ts

...
declare var require: any;

@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>