在ASP.NET Core + Angular 2上为Visual Studio设置图像路径
我需要添加一个静态图像,如下所示。可以告诉我为什么我无法在主页上显示图像,如下所示?即它不工作。在ASP.NET Core + Angular 2上为Visual Studio设置图像路径
这里我使用这个ASP.NET Core Template Pack
下面是关于它的好文章,从Steven Sanderson
\家\ home.component.html
<img src="{{heroImageUrl}}" style="height:30px">
home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'home',
template: require('./home.component.html')
})
export class HomeComponent {
public heroImageUrl ="./image/employee_management.jpg";
}
错误:
它说,像这样Failed to load resource: the server responded with a status of 404 (Not Found)
。可能是我issue.how可以给它正确的路径?图像如上所示。
由于您使用的WebPack捆绑这些文件,你只需要使用require
。您的打字稿代码改成这样:
public heroImageUrl = require("./image/employee_management.jpg");
...你就大功告成了。您现有的Webpack配置已经设置为使用file-loader
捆绑.jpg
文件,因此require
调用将返回捆绑映像的URL。
注:OP没有提及,但他们使用的是ASP.NET核心+角2模板here,这所有的WebPack成立了。因此,这最终成为一个Webpack问题,而不是一个有问题的问题,所以问题标题是误导性的。
太棒了...非常感谢:)我更新了模板的详细信息。 – Sampath
我与最新的模板有相同的问题,但此解决方案不适合我?当我使用require'self.parentView.context.require不是函数'时,我在模板中出现这个错误。而当我在组件中使用require时,会出现这个错误:“严重依赖:依赖的请求是表达式”。需要帮助,来吧史蒂夫 - 我知道你也可以帮助我。 :) –
你应该使用
<img [attr.src]="heroImageUrl" style="height:30px">
或
<img attr.src="{{heroImageUrl}}" style="height:30px">
也确保path
相对应。
Angular默认使用属性绑定。要明确告诉Angular使用属性绑定。
我不认为'attr.'是必要的。 –
在某些情况下,我的图像没有加载,而是抛出错误,所以在这些情况下不适合使用'attr'这样的建议。我不确定是否有必要使用'attr'或@GünterZöchbauer,如果你愿意的话,你可以更新我的答案和澄清。 –
有趣的是你会得到什么确切的错误。如果您使用'{{}}'绑定时发生错误,那么您将会发现错误,因为尚未设置值或类似值,因此尚未评估使用的表达式。 –
有两点需要注意,src属性,先用括号:
<img [src]="heroImageUrl " />
第二,确保图像的URL相对于用来显示组件路线的网址。因为这通常不是做一件伟大的事情,我建议你把网址从应用程序的根绝:
public heroImageUrl ="/ClientApp/app/components/home/image/employee_management.jpg";
然后更好,但把它放在一个公共场所像/images/employee_management.jpg
根据您的设置,您可能必须将静态数据文件放在资源/资产文件夹中。
我的设置将我的网站的根目录放入/src
。我将角文件放在子文件夹/src/app
中,如果我想链接到图像,我将它们放在src的子文件夹中,名为/src/assets
。当链接的那些图像,我简单地写的路径,如同/src
为根,所以链接到称为employee_management.jpg
的图像将是
'assets/employee_management.jpg'
我使用Angular CLI顺便说一句,它使用的WebPack捆绑这一切。
我没有这样的文件夹。我使用https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack – Sampath
将图像文件夹包含在angular-cli中。在资产节点JSON像下面
"assets": [
"assets",
"favicon.ico",
"fonts",
"images"
],
那么先生,这很容易,你可以直接在html中分配你的url src =“”。你不需要角2帮助。但如果你使用变量传递图像认为它是动态的,我认为你应该使用绝对路径。没有硬的感觉 –
但它不工作不?可能是相对路径问题否? @AmitSuhag – Sampath
你使用的是webpack?使用绝对路径。相对路径将无法工作。您尝试从./