角度2 img src在相对路径中 [英] Angular 2 img src in a relative path

问题描述

johnpapa Angular 2风格指南建议 逐个功能 方法。我明白了，你可以制作一个可以重复使用的自包含的小角度组件。

The johnpapa Angular 2 style guide suggests a folder-by-feature approach. I get the idea, you can make self contained little angular components that can be reused.

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

So, I made a component I wanted to reuse in another project and put it in it's own folder. I also added an image I wanted this component to display to the same folder, so it's all self contained.

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

但是这会尝试从root localhost加载图像： 3000 / logo.png 即可。

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

But this tries to then load the image from root localhost:3000/logo.png.

I suppose this means I have to actually use the exact path to the image, but doesn't this undermine the whole idea of components that can be reused in other project by other people?

对此有何建议？

编辑以澄清
我正在使用的文件夹结构Angular 2 quickstart，意思是我的根文件夹是：

Edit for clarification I am using the folder structure from the Angular 2 quickstart, meaning my root folder is:

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

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

So, even if I use the path header/logo.png, it does not work. I have to do app/header/logo.png. This is effectively an absolute path, and in fact works equally as well if I add a leading slash: "/app/header/logo.png". Anything less than the full path breaks the link. Meaning if someone wanted to reuse this they would have to have the exact same folder structure.

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

I guess this is just how it works, I'm only just learning Angular 2, but in my mind I should be able to load assets from within a components folder just like I can with the template or css

推荐答案

我正在使用 webpack ，并且已经能够通过 require 将组件中的图像作为一个克服此问题变量并在我的模板中使用它。

I am using webpack and have been able to overcome this issue by requireing the image in the component as a variable and using this in my template.

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

This is because during the bundling phase webpack will load the resource and store the correct URL and calling require at runtime will get this correct URL to pass to the template.

示例

Example

使用以下目录结构

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能够在捆绑时分析并加载它。

---

Admittedly this binds the component and template but the require needs to be in the component so that webpack is able to analyse and load it when bundling.

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

With this approach I have packaged my module using npm and installed and used it in another project - which also uses webpack.

我还没有用SystemJS测试。

I am yet to test with SystemJS.

这篇关于角度2 img src在相对路径中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！