相对路径中的角度2 img src

Angular 2 img src in a relative path

本文关键字：img src 路径 相对      更新时间：2023-09-26

johnpapa Angular 2风格指南建议采用按功能分类的方法。我的想法是，你可以制作可以重复使用的自包含的小角度组件。

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

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

但这会尝试从根目录加载图像localhost:3000/logo.png

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

对此有何建议？

编辑以进行澄清我使用Angular 2快速启动中的文件夹结构，这意味着我的根文件夹是：

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

因此，即使我使用路径头/log.png，它也不起作用。我必须执行app/header/logo.png。这实际上是一个绝对路径，事实上，如果我添加一个前导斜杠："/app/header/logo.png"，也同样有效。任何小于完整路径的内容都会破坏链接。这意味着，如果有人想重复使用它，他们必须拥有完全相同的文件夹结构。

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

一样

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

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

示例

使用以下目录结构

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

头组件.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进行测试。

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

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

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

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

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

@David的解决方案有点过时，因为现在angular2可以升级，它适用于anular 2/3。对于角4及以上，它将抛出需要未找到的错误，这是我修改它的方式，

头组件.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>

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

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

从路径/图像（根/路径/图像、/path/image等）

至/路径/图像

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

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

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

您可以将图像存储在assets文件夹下，并引用它们：

不要使用组件的相对路径。

另请参阅：https://mdbootstrap.com/support/angular/images-not-loading-from-assets-folder-in-angular/

相关文章：