Statikus fájlok helye a wwwroottól nem más mappákban

Környezet

Visual Stúdió

• Visual Studio 2019

ASP.NET mag

• 3.1 (Borotva oldal, MVC)

A statikus fájlok alapértelmezett elhelyezési helye

A statikus fájlok (.js, .css, .png stb.) alapértelmezés szerint a wwwroot mappa alatt vannak. Ez lehetővé teszi a webhely felhasználói számára, hogy .js és .css a HTML-et közvetlenül a HTML-rel együtt, és tükrözzék őket a képernyőn.

A statikus fájl alapértelmezett elhelyezési mappája wwwroot, Startup.Configure mert a metódusban app.UseStaticFiles leírt alábbi módszert hívja meg:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

A "wwwroot" fizikai mappa elérési útja az URL-ben található "https://<host name>/" . A wwwroot\image\sample.png fájl például a https://<állomásnév>/image.png és minta url-címében található.]

A wwwroot mappán kívül elhelyezett fájlokra lényegében nem hivatkoznak az internetes URL-címről.

Statikus fájlok helye a wwwroot mappán kívül, és a hivatkozási útvonal módosítása az URL-címen

Mappakonfiguráció

Ezúttal szeretném elhagyni a wwwroot mappa funkcióját, de a képfájlt is egy külön mappába szeretném tenni, hogy hivatkozni tudjon a weben.

A projekt mappakonfigurációjának a következőnek kell lennie, így a képfájlok a területek minden egyes helyének Tartalom mappájában láthatók.

Ebben az állapotban az URL-.png a minta1-ben.png

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

És

• https://<Állomásnév>/site1/content/image/sample1.png

úgy tűnhet, mintha lenne, de itt

• https://<Állomásnév>/site1/image/sample1.png

hivatkozni kell.

By the way, ha egy statikus fájlt kívül wwwroot mappát, a build művelet a fájl hiányzik. Ha folytatja a közzétételt, a fájl nem kerül elhelyezve, ezért feltétlenül állítsa vissza tartalomra.

Program hozzáadása

Ha a statikus fájlokat nem wwwroot mappákban is Startup.Configure elérhetővé akarja tenni, hívja a app.UseStaticFiles metódus további módszereit az alábbiak szerint:

// 追加
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 A metódus argumentumok nélküli hívása lehetővé teszi a wwwroot mappát. További beállításokat az StaticFileOptions első argumentumra való átadással adhat hozzá.

StaticFileOptions.FileProvider Itt adhatja PhysicalFileProvider meg azt a fizikai mappát, amelyet a tulajdonság statikus fájlként szeretne hivatkozni a példány átadása közben. Az itt megadott elérési út alatt található fájl egy olyan fájl, amely a weben hivatkozhat. Ez lehet a következő RequestPath tulajdonságok URL-címének gyökere is:

env.ContentRootPath A tulajdonság a webes program gyökérútvonalát (fizikai elérési útját) tartalmazza. Célközönség, hogy ezt kombinálja a célmappa relatív elérési útja.

StaticFileOptions.RequestPath A tulajdonság a statikus fájlra hivatkozó URL gyökérútvonalát írja le. Az alapértelmezett wwwroot https://<ホスト名> alapul . Mint a RequestPath = "/Site1" fenti kód, ha írsz https://<ホスト名>/Site1 a gyökér. Ez Areas/Site1/Content/xxxx összekapcsolja a fizikai https://<ホスト名>/Site1/xxxx elérési utat az URL-címmel.

A minta1 .png példaként a Areas/Site1/Content/image/sample.png fájl https://<ホスト名>/Site1/image/sample.png hivatkozhat az elérési úton.

Művelet ellenőrzése

index.html Helyezze el az img címkét, hogy a kép a következőképpen látható: Az elérési út a webhely1 és a site2 képekre is hivatkozik a meghatározottak szerint.

<!-- 省略 -->

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

Ha futtatod, és látod a képet, az sikeres.