Placera statiska filer i andra mappar än wwwroot

Miljö

Visuell studio

• Visual Studio 2019

ASP.NET kärna

• 3.1 (Rakbladssida, MVC)

Om standardplaceringsplatsen för statiska filer

Statiska filer (.js, .css, .png osv.) bestäms som standard under mappen wwwroot. Detta gör det möjligt för webbplatsanvändare att .js .css filer direkt tillsammans med HTML och reflektera dem på skärmen.

Standardplaceringsmappen för den här statiska filen är wwwroot Startup.Configure eftersom den anropar följande app.UseStaticFiles metod som beskrivs i metoden:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Sökvägen till den fysiska mappen "wwwroot" är "https://<host name>/" i URL:en. Filen i wwwroot\image\sample.png finns till exempel i URL:en under https://<host name>/image.png amp; sample.]

Filer som placeras utanför wwwroot-mappen refereras i huvudsak inte från en URL på webben.

Så här placerar du statiska filer utöver wwwroot-mappen och ändrar referenssökvägen på WEBBADRESSen

Mappkonfiguration

Den här gången vill jag lämna funktionen i wwwroot-mappen, men också placera bildfilen i en separat mapp så att den kan refereras på webben.

Projektets mappkonfiguration ska vara följande, så att du kan se bildfilerna i mappen Innehåll på varje plats i Områdena.

I det här läget kan URL:en .png filen i exempel1.png

• https://<hostname>/arenas/site1/content/image/sample1.png

Och

• https://<Hostname>/site1/content/image/sample1.png

det kan verka som det skulle vara, men här

• https://<Hostname>/site1/image/sample1.png

som ska refereras i .

Förresten, om du placerar en statisk fil utöver wwwroot-mappen kan filens byggåtgärd saknas. Om du fortsätter att publicera placeras inte filen, så se till att ställa in den på innehåll igen.

Lägga till ett program

Om du vill göra statiska filer tillgängliga i mappar som inte är wwwroot Startup.Configure app.UseStaticFiles anropar du ytterligare metoder i metoden enligt följande:

// 追加
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 Genom att anropa metoden utan argument kan mappen wwwroot anropas. Du kan lägga till ytterligare StaticFileOptions inställningar genom att skicka till det första argumentet.

StaticFileOptions.FileProvider Anger den PhysicalFileProvider fysiska mapp som du vill att egenskapen ska referera till som en statisk fil när du skickar en förekomst av . Filen under sökvägen som anges här är en fil som kan refereras på webben. Det kan också vara RequestPath roten till URL:en för följande egenskaper:

env.ContentRootPath Egenskapen innehåller webbprogrammets rotsökväg (fysisk sökväg). Det är en bra idé att kombinera detta med den relativa sökvägen till målmappen.

StaticFileOptions.RequestPath Egenskapen beskriver rotsökvägen för url:en som refererar till den statiska filen. Standard wwwroot https://<ホスト名> baseras på . Som i RequestPath = "/Site1" koden ovan, om du skriver https://<ホスト名>/Site1 är roten. Detta Areas/Site1/Content/xxxx länkar den fysiska https://<ホスト名>/Site1/xxxx sökvägen med URL:en.

Med exempel .png exempel kan Areas/Site1/Content/image/sample.png filen https://<ホスト名>/Site1/image/sample.png refereras i sökvägen.

Kontrollera åtgärd

index.html Placera taggen img så att du kan se bilden på följande sätt: Sökvägen refererar också till site1- och site2-bilder enligt definitionen.

<!-- 省略 -->

<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" />
<!-- ここまで追加 -->

Om du kör den och ser bilden blir det en succé.