相对路径中的Angular 2 img src

Posted 2023-03-13

技术标签:

【中文标题】相对路径中的Angular 2 img src【英文标题】：Angular 2 img src in a relative path 【发布时间】：2016-07-17 04:45:50 【问题描述】：

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

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

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

【问题讨论】：

做绝对路径，这样你就可以到处使用了？只需添加获取图像所需的最小路径，因此如果它位于：component1/images/logo.png，请编写：我已经编辑了我的问题以进行澄清。这是关于如何将模块自包含在其文件夹中，而不用担心该文件夹在应用程序中的位置。这样它就可以在其他项目中轻松重用。但是，现在看来，它应该是这样工作的。嗨，Rob，你解决过这个问题吗？这个答案对我有帮助，它也应该对你有用***.com/a/42660412/4788476 【参考方案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>

诚然，这绑定了组件和模板，但 require 需要在组件中，以便 webpack 能够在捆绑时分析和加载它。

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

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

【讨论】：

这很有趣，感谢您发布此内容。当我最初问这个问题时（差不多一年前了！），我还没有深入了解 webpack。这对我来说是一个非常好的解决方案。我今晚要试试这个。它也适用于绝对路径和 webpack 别名！！！这是最好的答案，我认为导入图像的最佳方式是因为您不必编写带有很多丑陋的相对路径： src=".:/../../../../ ../finally-my-image.png". 诚然，这是一个完美的解决方案，考虑到它负责 webpack 捆绑，甚至可以从 node_modules 访问图像，这个解决方案非常完美，用法：private logo = require('3rdPartyNodeModules/src/images/test.svg') 如果我没记错的话，它在 AOT 项目中运行良好。我必须做的改变是删除 private 修饰符，因为 ng 编译器无法使用它。 Angular cli 在后台使用 Webpack，因此这里应用了相同的 require 原则。男人。你拯救了这一天。我尝试了 50 种不同的方法，包括 ControlValueAccessor，但这一种效果很好。【参考方案2】：

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

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

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

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

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

【讨论】：

【参考方案3】：

@David 的解决方案稍微过时了，因为现在可以升级 angular2，它适用于 anular 2/3。对于 Angular 4 及以上，它会抛出 require not found 错误，这就是我修改它的方式，

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