c# - Brug af relativ billedsti i Angular 2 og ASP.NET Core

Jeg prøvede at få stien til en lokal billedfil, men jeg kan ikke finde ud af, hvor de relative stier er placeret. Normalt ville jeg hente dem fra wwwroot/images-mappen, men når jeg prøver at indlæse dem derfra, mislykkes det.

Hvor får man relative stier i Angular 2? Jeg brugte generator-aspnetcore-spa til at oprette applikationen.

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

For eksempel i mappen ClientApp/components/app/app.ts.
Hvor ville jeg placere billedmappen, og hvordan kalder jeg dens sti?

Svar #1

I 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 standardindstilles til den nuværende mappe fra din app.

Ved at kalde app.UseStaticFiles(); i Startup-klassen

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();

Den statiske fil-middleware er aktiveret. Med standardindstillingerne vil den levere alle filer i webrodmappen (<content root>/wwwroot).

Hvis du kigger på https://github.com/aspnet/JavaScriptServices Angular2-skabelonen, vil du se i webpack.config.js, at outputtet gemmes i

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

så det er <content root>/wwwroot/dist og URL'en vil være

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

URL'en behøver ikke at indeholde ClientApp (indholdets rodliveau, ikke tilgængelig via statisk fil-middleware) men dist (wwwroot-niveau).

Så sæt din images-mappe ind i ...\wwwroot\images, og billedets URL vil være http://<whatever host and port>/images/<mit billedfil>.

Svar #2

I .Net Core har appen brug for at vide, at den skal bruge statiske filer, har du fået

app.UseStaticFiles();

i Startup.cs?

Relaterede artikler