在ASP.NET Core + Angular 2上为Visual Studio设置图像路径

我需要添加一个静态图像，如下所示。可以告诉我为什么我无法在主页上显示图像，如下所示？即它不工作。在ASP.NET Core + Angular 2上为Visual Studio设置图像路径

下面是关于它的好文章，从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可以给它正确的路径？图像如上所示。

来源

2017-01-02 Sampath

那么先生，这很容易，你可以直接在html中分配你的url src =“”。你不需要角2帮助。但如果你使用变量传递图像认为它是动态的，我认为你应该使用绝对路径。没有硬的感觉 –

但它不工作不？可能是相对路径问题否？ @AmitSuhag – Sampath

你使用的是webpack？使用绝对路径。相对路径将无法工作。您尝试从./ < - 这意味着您正在从当前目录进行检查。从/ app开始我猜不知道你的应用程序结构。为图片创建separte文件夹资源 –

由于您使用的WebPack捆绑这些文件，你只需要使用require。您的打字稿代码改成这样：

public heroImageUrl = require("./image/employee_management.jpg");

...你就大功告成了。您现有的Webpack配置已经设置为使用file-loader捆绑.jpg文件，因此require调用将返回捆绑映像的URL。

注：OP没有提及，但他们使用的是ASP.NET核心+角2模板here，这所有的WebPack成立了。因此，这最终成为一个Webpack问题，而不是一个有问题的问题，所以问题标题是误导性的。

来源

2017-01-03 11:24:40

太棒了...非常感谢:)我更新了模板的详细信息。 – Sampath

我与最新的模板有相同的问题，但此解决方案不适合我？当我使用require'self.parentView.context.require不是函数'时，我在模板中出现这个错误。而当我在组件中使用require时，会出现这个错误：“严重依赖：依赖的请求是表达式”。需要帮助，来吧史蒂夫 - 我知道你也可以帮助我。 :) –

-1

你应该使用

<img [attr.src]="heroImageUrl" style="height:30px">

或

<img attr.src="{{heroImageUrl}}" style="height:30px">

也确保path相对应。

Angular默认使用属性绑定。要明确告诉Angular使用属性绑定。

来源

2017-01-02 12:31:34

我不认为'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

来源

2017-01-02 12:31:43 Robba

这样说，然后'失败加载资源：服务器响应状态为404（Not Found）'。可能是路径问题。我可以正确地给它吗？图像如上所示。 – Sampath

不工作。可能是我的相对路径错误否？ – Sampath

将'src'放在括号中是没有必要的。 OP的语法（'src =“{{heroImageUrl}}”）完全有效。问题是获取正确的URL。 –

根据您的设置，您可能必须将静态数据文件放在资源/资产文件夹中。

我的设置将我的网站的根目录放入/src。我将角文件放在子文件夹/src/app中，如果我想链接到图像，我将它们放在src的子文件夹中，名为/src/assets。当链接的那些图像，我简单地写的路径，如同/src为根，所以链接到称为employee_management.jpg的图像将是

'assets/employee_management.jpg'

我使用Angular CLI顺便说一句，它使用的WebPack捆绑这一切。

来源

2017-01-02 12:35:37

我没有这样的文件夹。我使用https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack – Sampath

将图像文件夹包含在angular-cli中。在资产节点JSON像下面

"assets": [ 
     "assets", 
     "favicon.ico", 
     "fonts", 
     "images" 
     ],

来源

2017-01-02 13:04:36 Aniket

我没有这样的文件夹。我使用：https：// marketplace。 visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack – Sampath

使用CLI时，我们需要将这些静态文件添加到资产节点，以告诉Angular 2添加到部署文件夹。我看到你的图像文件夹里有employee_management.jpg文件。 – Aniket

是的，那么相关路径应该是什么？ – Sampath

在ASP.NET Core + Angular 2上为Visual Studio设置图像路径

回答

相关问题