Javascript 相对路径中的Angular 2 img src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36287518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 img src in a relative path
提问by Rob Louie
The johnpapa Angular 2 style guidesuggests a folder-by-featureapproach. I get the idea, you can make self contained little angular components that can be reused.
johnpapa Angular 2 风格指南建议采用逐个功能的方法。我明白了，您可以制作可重复使用的自包含小角度组件。
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"/>
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?
但这会尝试从 root 加载图像localhost:3000/logo.png。
我想这意味着我必须实际使用图像的确切路径，但这不会破坏其他人可以在其他项目中重用的组件的整体想法吗？
Suggestions on this?
对此有何建议？
Edit for clarificationI am using the folder structure from the Angular 2 quickstart, meaning my root folder is:
编辑以澄清我使用的是 Angular 2 快速入门中的文件夹结构，这意味着我的根文件夹是：
app/
node_modules/
index.html
package.json
tsconfig.json
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.
因此，即使我使用路径 header/logo.png，它也不起作用。我必须做 app/header/logo.png。这实际上是一个绝对路径，事实上，如果我添加一个前导斜杠：“/app/header/logo.png”，它也同样有效。任何小于完整路径的东西都会断开链接。这意味着如果有人想重用它，他们必须拥有完全相同的文件夹结构。
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
我想这就是它的工作原理，我只是在学习 Angular 2，但在我看来，我应该能够像使用模板或 css 一样从组件文件夹中加载资产
回答by David Blaney
I am using webpackand have been able to overcome this issue by requireing the image in the component as a variable and using this in my template.
我正在使用webpack并且已经能够通过require将组件中的图像作为变量并在我的模板中使用它来克服这个问题。
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.
这是因为在打包阶段 webpack 将加载资源并存储正确的 URL，并且在运行时调用 require 将获取这个正确的 URL 以传递给模板。
Example
例子
Using the following directory structure
使用以下目录结构
app/
header/
header.component.ts
header.component.html
assets/
logo.png
...
header.component.ts
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
头文件.component.html
<div>
<img [src]="LOGO" />
</div>
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.
诚然，这绑定了组件和模板，但 require 需要在组件中，以便 webpack 在捆绑时能够分析和加载它。
With this approach I have packaged my module using npm and installed and used it in another project - which also uses webpack.
通过这种方法，我使用 npm 打包了我的模块，并在另一个项目中安装并使用了它——该项目也使用了 webpack。
I am yet to test with SystemJS.
我还没有用 SystemJS 进行测试。
回答by rekotc
I would solve this problem by splitting the src path into 2 parts, like this:
我将通过将 src 路径分成 2 部分来解决这个问题，如下所示：
<img class="logo" [src]="(imgPath + imgFileName)" />
then, inside the component definition, you set:
然后，在组件定义中，您设置：
@Input() imgPath:string = "app/header/";
imgFileName:string = "logo.png";
By using the @Input() decorator, the imgPath variable can be seen externally, so that in case you move the component into another place you can set a different path, making the component reusable.
通过使用@Input() 装饰器，可以在外部看到 imgPath 变量，以便万一您将组件移动到另一个位置，您可以设置不同的路径，使组件可重用。
回答by serehactka
If the problem is a 404 error you need to change your path
如果问题是 404 错误，则需要更改路径
from path/image(root/path/image, /path/imageetc.)
从路径/图像（root/path/image，/path/image等）
to ./path/image
到./path/image
Then it should work if there aren't any other problems.
如果没有任何其他问题，那么它应该可以工作。
回答by Papa Stahl
Check out this answer: how to serve up images in angular2
查看此答案：如何在 angular2 中提供图像
The key is to either put it into the "assets" folder or to edit your ".angular-cli.json" file (assets section) to include the location where the image is located. This is also true for other resources that are supposed to be served up, i.e. style sheets.
关键是将其放入“assets”文件夹或编辑“.angular-cli.json”文件（assets 部分）以包含图像所在的位置。对于应该提供的其他资源，即样式表，也是如此。
回答by ishandutta2007
@David's solution is slightly outdated given that now angular2 can be upgrade, it works for anular 2/3. For angular 4 and above it would throw require not found error, this is how i modified it,
@David 的解决方案有点过时，因为现在 angular2 可以升级，它适用于 anular 2/3。对于角度 4 及以上，它会抛出 require not found 错误，这就是我修改它的方式，
header.component.ts
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
头文件.component.html
<div>
<img [src]="LOGO" />
</div>
回答by Mackelito
Use an assets folder in your root that contains the logo image
使用根目录中包含徽标图像的资产文件夹
