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

Posted 2023-03-31

【中文标题】在 Visual Studio 的 ASP.NET Core + Angular 2 模板上设置图像路径

【英文标题】：Set Image path on ASP.NET Core + Angular 2 template for Visual Studio

【发布时间】：2017-01-02 12:24:09

【问题描述】：

我需要添加一个静态图片，如下图。你能告诉我为什么我不能在主页上显示图片，如下图所示？即它不工作。

这里我用的是ASP.NET Core Template Pack

这是来自Steven Sanderson的不错的文章

\home\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)。可能是路径问题。我怎样才能正确给出它？图片如上所示。

【问题讨论】：

那么先生，您可以更容易地直接在 html src="" 中分配您的 url。你不需要 Angular 2 的帮助。但是如果您使用变量传递图像，则认为它是动态的，我认为您应该使用绝对路径。没有难受的感觉

但它不起作用，不是吗？可能是相对路径问题，不是吗？ @AmitSuhag

你在使用 webpack 吗？？使用绝对路径。相对路径将不起作用。您正在尝试从 ./

你可以在我的帖子上看到我的文件夹结构。请看。 @AmitSuhag

让我们continue this discussion in chat。

【参考方案1】：

由于您使用 Webpack 来捆绑这些文件，因此您只需要使用 require。将您的 TypeScript 代码更改为：

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

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

---

注意：OP 没有提到，但他们使用的是 ASP.NET Core + Angular 2 模板here，它已经设置了 Webpack。因此，这最终成为一个 Webpack 问题，而不是 Angular 问题，因此问题标题具有误导性。

【讨论】：

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

我对最新的模板也有同样的问题，但是这个解决方案对我不起作用？当我使用 require self.parentView.context.require is not a function 时，我在模板中收到此错误。当我在组件中使用 require 时，我得到了这个错误，Critical dependency: the request of a dependency is an expression。需要帮助，请来史蒂夫——我知道你也可以帮助我。 :)

【参考方案2】：

在资产节点下的 angular-cli.json 中包含图像文件夹，如下所示

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

【讨论】：

我没有这样的文件夹。我正在使用：marketplace.visualstudio.com/…

在使用 CLI 时，我们需要将此类静态文件添加到 assets 节点，以告诉 Angular 2 添加到部署文件夹中。我看到你在 image 文件夹中有 employee_management.jpg 文件。

【参考方案3】：

有两点需要注意，首先对 src 属性使用括号：

<img [src]="heroImageUrl " />

其次，确保图像的 url 与用于显示组件的路由的 url 相关。因为这通常不是一件好事，所以我建议将 url 从应用程序的根目录设为绝对：

public heroImageUrl ="/ClientApp/app/components/home/image/employee_management.jpg";

然后更好的是，把它放在一个公共位置，比如/images/employee_management.jpg

【讨论】：

它这样说然后Failed to load resource: the server responded with a status of 404 (Not Found)。可能是路径问题。我怎样才能正确给出它？图片如上所示。

不需要将src 放在括号中。 OP 的语法 (src=" heroImageUrl ") 完全有效。问题是获取正确的 URL。

【参考方案4】：

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

我的设置将我网站的根目录放在/src。我将角度文件放在子文件夹/src/app 中，如果我想链接到图像，我将它们放在名为/src/assets 的src 子文件夹中。链接这些图像时，我只需将路径写成/src 是根，因此链接到名为employee_management.jpg 的图像将在

'assets/employee_management.jpg'

我使用Angular CLI btw，它使用 webpack 来打包。

【讨论】：

我没有这样的文件夹。我正在使用marketplace.visualstudio.com/…

【参考方案5】：

你应该使用

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

或

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

还要确保path 应该是相对的。

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

【讨论】：

我认为attr. 没有必要。

在某些情况下，我的图像没有加载，而是抛出错误，所以在这些情况下，我建议在这里使用attr。我不确定是否有必要使用attr，@GünterZöchbauer 如果需要，您可以更新我的答案并进行澄清。

您遇到的确切错误会很有趣。我可以理解，如果您使用 绑定，而使用的表达式由于尚未设置或类似的值而无法评估，则会出现错误。

@GünterZöchbauer 下次我遇到此错误时会向您展示错误。顺便说一句，感谢您的澄清。

这个答案不正确。使用attr 没有任何区别。问题在于获取正确的图像 URL，而不是发出 img 标记。