关于javascript：相对路径中的Angular 2 img src


Angular 2 img src in a relative path

johnpapa Angular 2样式指南建议采用逐个文件夹的方法。我的想法是，您可以使自包含的小角度组件可以重复使用。

因此，我做了一个要在另一个项目中重用的组件，并将其放在自己的文件夹中。我还添加了一个我希望该组件显示在同一文件夹中的图像，因此它们全部包含在内。

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

但这会尝试从根localhost:3000/logo.png加载图像。我想这意味着我必须实际使用图像的确切路径，但是这是否破坏了其他人可以在其他项目中重用的组件的整体思想？

有什么建议吗？

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

1
2
3
4
5
app/
node_modules/
index.html
package.json
tsconfig.json

因此，即使我使用路径header / logo.png，它也不起作用。我必须做app / header / logo.png。这实际上是一条绝对路径，并且如果我添加一个斜杠" /app/header/logo.png"，实际上也同样有效。小于完整路径的任何内容都会断开链接。这意味着如果有人想重复使用此文件夹，则他们必须具有完全相同的文件夹结构。

我想这就是它的工作方式，我只是学习Angular 2，但在我看来，我应该能够像使用模板或CSS一样从components文件夹中加载资产

相关讨论

我正在使用webpack，并且能够通过require将组件中的图像作为变量并在模板中使用它来解决此问题。

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

Example

使用以下目录结构

1
2
3
4
5
6
7
app/
    header/
        header.component.ts
        header.component.html
        assets/
            logo.png
...

header.component.ts

1
2
3
4
5
6
7
8
9
10
...
@Component({
    selector: 'header',
    templateUrl: './header.component.html', // Auto required by webpack
})
export class HeaderComponent {
    private LOGO = require("./assets/logo.png");

    constructor() {};
}

header.component.html

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

诚然，这绑定了组件和模板，但是需求需要包含在组件中，以便webpack能够在捆绑时对其进行分析和加载。

通过这种方法，我使用npm打包了模块，并在另一个项目中安装并使用了该项目-该项目也使用了webpack。

我尚未使用SystemJS进行测试。

相关讨论

我可以通过将src路径分为两部分来解决此问题，如下所示：

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

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

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

通过使用@Input()装饰器，可以从外部看到imgPath变量，因此，如果将组件移到另一个位置，则可以设置其他路径，从而使组件可重用。

鉴于现在可以升级angular2，@ David的解决方案有些过时了，它适用于anular 2/3。对于角度为4及更高的角度，它将抛出要求未找到的错误，这就是我对其进行修改的方式，

header.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
...
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

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

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

关键是将其放入"资产"文件夹或编辑" .angular-cli.json"文件("资产"部分)以包括图像所在的位置。对于应该提供的其他资源(即样式表)也是如此。

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

从路径/映像(根/路径/映像，/路径/映像等)

到./path/image

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

相关讨论

在根目录中使用资产文件夹，其中包含徽标图像