在 Angular 2 和 ASP.NET Core 中使用相对图像路径答案

【问题标题】：Using relative Image path in Angular 2 and ASP.NET Core在 Angular 2 和 ASP.NET Core 中使用相对图像路径
【发布时间】：2017-01-11 05:23:27
【问题描述】：

我试图获取本地图像文件的路径，但我无法确定相对路径的位置。通常我会将它们从 wwwroot/images 文件夹中取出，但是当我尝试从那里加载它们时它会失败。

在 Angular 2 中，您从哪里获得相对路径？我使用 generator-aspnetcore-spa 来创建应用程序。

https://github.com/aspnet/JavaScriptServices
http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

例如在文件夹 ClientApp/components/app/app.ts.
我将图像文件夹放在哪里以及如何调用它的路径？

【问题讨论】：

我认为如果您为您的示例项目提供一个 github 存储库并参考您遇到问题的确切组件和图像文件会更容易。

标签： c# angular typescript asp.net-core

【解决方案1】：

在Program.cs

public class Program
{
    public static void Main(string[] args)
    {
        var host = new WebHostBuilder()
            .UseKestrel()
            .UseContentRoot(Directory.GetCurrentDirectory())
            .UseIISIntegration()
            .UseStartup<Startup>()
            .Build();

        host.Run();
    }
}

UseContentRoot 默认为您应用的当前目录。

通过在 Startup 类中调用 app.UseStaticFiles();

public class Startup
{
    ...
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        ...
        app.UseStaticFiles();

启用静态文件中间件。使用默认设置，它将提供 Web 根文件夹 (<content root>/wwwroot) 中的所有文件。

如果你查看https://github.com/aspnet/JavaScriptServicesAngular2 模板，你会在webpack.config.js 中看到输出存储在

output: {
    path: path.join(__dirname, 'wwwroot', 'dist'),
    filename: '[name].js',
    publicPath: '/dist/'
},

那就是<content root>/wwwroot/dist，网址是

 http://<whatever host and port>/dist/<my file>

URL 不必包含 ClientApp（内容根级别，静态文件中间件无法访问）而是 dist（wwwroot 级别）。

因此，将您的images 文件夹放入...\wwwroot\images，图像的URL 将是http://<whatever host and port>/images/<my image file>。

【讨论】：

【解决方案2】：

在.Net Core中，app使用静态文件需要知道的，你有吗

app.UseStaticFiles();

在 Startup.cs 中？

【讨论】：