Question

johnpapa Angular 2风格指南建议使用 folder-by-feature 方法。我明白了，你可以自制小角度组件，可以重复使用。

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

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

但是这会尝试从根 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 < / em>的

Answer 1

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

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

实施例

使用以下目录结构

require

<强> header.component.ts

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

<强> header.component.html

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

    constructor() {};
}

不可否认，这会绑定组件和模板，但需要在组件中，以便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错误，则需要更改路径

来自路径/图片（ root / path / image ， / path / image 等）

到 ./ path / image

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

Answer 5

查看此答案：how to serve up images in angular2

关键是要把它放入＆＃34;资产＆＃34;文件夹或编辑你的＆＃34; .angular-cli.json＆＃34;文件（资产部分）包括图像所在的位置。对于应该提供的其他资源（即样式表）也是如此。

Answer 6

@David的解决方案有些过时，因为现在可以升级angular2，它适用于anular 2/3。对于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>

Angular 2 img src在相对路径

6 个答案: