Placere statiske filer i andre mapper end wwwroot

Dato for oprettelse af side :

Miljø

Visual Studio
  • Visual Studio 2019
ASP.NET Kerne
  • 3.1 (Barberbladsside, MVC)

Om standardplaceringsplaceringen for statiske filer

Statiske filer (.js, .css, .png osv.) er fast besluttet på at være under wwwroot-mappen som standard. Dette gør det muligt for webstedsbrugere at se .js og .css filer direkte sammen med HTML og reflektere dem på skærmen.

Standardplaceringsmappen for denne statiske fil er Startup.Configure wwwroot, fordi den kalder følgende app.UseStaticFiles metode, der er beskrevet i metoden:

public class Startup
{
  // 省略

  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
    // 省略

    app.UseStaticFiles();

    // 省略
  }
}

Stien til den fysiske mappe "wwwroot" er "https://<værtsnavn>/" i URL-adressen. Filen i wwwroot\image\sample.png findes i URL-adressen under https://<værtsnavn>/billede.png og eksempel.]

Filer placeret uden for wwwroot-mappen refereres i det væsentlige ikke fra en URL-adresse på internettet.

Sådan placeres statiske filer ud over mappen wwwroot, og referencestien ændres på URL-adressen

Konfiguration af mappe

Denne gang, jeg ønsker at forlade funktionen af wwwroot mappe, men også placere billedfilen i en separat mappe, så det kan refereres til på internettet.

Projektets mappekonfiguration skal være som følger, så du kan se billedfilerne i mappen Indhold på hvert websted i Områderne.

I denne tilstand .png URL-adressen filen i eksempel1.png

  • https://<værtsnavn>/arenaer/site1/content/image/sample1.png

Og

  • https://<Værtsnavn>/websted1/indhold/billede/eksempel1.png

det kan synes som det ville være, men her

  • https://<Værtsnavn>/websted1/billede/eksempel1.png

der henvises til i .

Hvis du placerer en statisk fil ud over mappen wwwroot, mangler filens buildhandling muligvis. Hvis du fortsætter med at udgive, placeres filen ikke, så sørg for at indstille den til indhold igen.

Tilføje et program

Hvis du vil gøre statiske filer tilgængelige i Startup.Configure ikke-wwwroot-mapper, skal du kalde yderligere app.UseStaticFiles metoder i metoden på følgende måde:

// 追加
using Microsoft.Extensions.FileProviders;
using System.IO;

// 省略

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  // 省略

  // wwwroot フォルダで静的ファイル参照を有効にする
  app.UseStaticFiles();

  // Site1 用の物理コンテンツフォルダと参照 URL を紐づける
  app.UseStaticFiles(new StaticFileOptions()
  {
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site1/Content")),
    RequestPath = "/Site1",
  });

  // Site2 用の物理コンテンツフォルダと参照 URL を紐づける
  app.UseStaticFiles(new StaticFileOptions()
  {
    FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Areas/Site2/Content")),
    RequestPath = "/Site2",
  });

  // 省略
}

app.UseStaticFiles Hvis du kalder metoden uden argumenter, aktiveres mappen wwwroot. Du kan tilføje yderligere StaticFileOptions indstillinger ved at overføre til det første argument.

StaticFileOptions.FileProvider Angiver den PhysicalFileProvider fysiske mappe, som egenskaben skal referere til som en statisk fil, mens der overføres en forekomst af . Filen under den sti, der er angivet her, er en fil, der kan refereres til på World Wide Web. Det kan også være RequestPath roden til URL-adressen til følgende egenskaber:

env.ContentRootPath Egenskaben indeholder webprogrammets rodsti (fysiske sti). Det er en god ide at kombinere dette med den relative sti til destinationsmappen.

StaticFileOptions.RequestPath Egenskaben beskriver rodstien for den URL-adresse, der refererer til den statiske fil. Standard-wwwroot https://<ホスト名> er baseret på . Som i RequestPath = "/Site1" ovenstående kode, hvis du skriver https://<ホスト名>/Site1 er roden. Dette Areas/Site1/Content/xxxx sammenkæder den fysiske https://<ホスト名>/Site1/xxxx sti med URL-adressen.

Hvis du bruger eksempel1.png som eksempel, Areas/Site1/Content/image/sample.png kan der refereres til filen https://<ホスト名>/Site1/image/sample.png i stien.

Kontroller handling

index.html Placer img-tagget, så du kan se billedet på følgende måde: Stien refererer også til site1- og site2-billeder som defineret.

<!-- 省略 -->

<div class="text-center">
	<h1 class="display-4">Welcome</h1>
	<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- ここから追加 -->
<img src="~/image/sample.png" />
<img src="~/site1/image/sample1.png" />
<img src="~/site2/image/sample2.png" />
<!-- ここまで追加 -->

Hvis du kører det og se billedet, er det en succes.