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

Question

我试图获取本地图像文件的路径,但我无法弄清楚相对路径的位置.通常我会把它们从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中.
我将把图像文件夹放在哪里,如何调用它的路径？

Answer 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应用程序中当前目录的默认值.

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

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/JavaScriptServices Angular2模板,您将在webpack.config.js中看到输出存储在

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

所以这就是<content root>/wwwroot/dist和URL

 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>.