c# - 在 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> .