Umiestnite statické súbory do iných priečinkov ako wwwroot

Životné prostredie

Vizuálne štúdio

• Visual Studio 2019

ASP.NET jadro

• 3.1 (Britva strana, MVC)

Informácie o predvolenom umiestnení statických súborov

Statické súbory (.js, .css, .png atď.) sú predvolene určené ako súbory v priečinku wwwroot. To umožňuje používateľom webových stránok vidieť .js a .css súbory priamo spolu s HTML a odrážať ich na obrazovke.

Predvolený priečinok umiestnenia pre tento statický súbor je wwwroot, Startup.Configure pretože volá nasledujúcu app.UseStaticFiles metódu popísaná v metóde:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Cesta k fyzickému priečinku "wwwroot" je "https://<host name>/" v adrese URL. Napríklad súbor vo formáte wwwroot\image\sample.png nájdete na adrese URL v časti https://<host name>/image.png amp; sample.]

Súbory umiestnené mimo priečinka wwwroot sa v podstate neposudzujú z adresy URL na webe.

Ako umiestniť statické súbory okrem priečinka wwwroot a zmeniť referenčnú cestu na url

Konfigurácia priečinka

Tentoraz chcem opustiť funkciu priečinka wwwroot, ale tiež umiestniť súbor s obrázkom do samostatného priečinka tak, aby mohol byť odkazovaný na webe.

Konfigurácia priečinka projektu by mala byť nasledovná, takže môžete vidieť súbory s obrázkami v priečinku Obsah každej lokality v oblastiach.

V tomto stave URL .png v sample1.png

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

A

• https://<Názov hostiteľa>/site1/content/image/sample1.png

môže sa zdať, že by to tak bolo, ale tu

• https://<Názov hostiteľa>/site1/image/sample1.png

na ktoré sa odkazuje v .

Mimochodom, ak umiestnite statický súbor okrem priečinka wwwroot, stavať akcia súboru môže chýbať. Ak budete pokračovať v publikovaní, súbor sa neumiiestňuje, preto ho nezabudnite nastaviť späť na obsah.

Pridanie programu

Ak chcete sprístupniť statické súbory v non-wwwroot Startup.Configure priečinky, zavolajte app.UseStaticFiles ďalšie metódy v metóde takto:

// 追加
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 Volanie metódy bez argumentov umožňuje wwwroot priečinok. Ďalšie nastavenia môžete StaticFileOptions pridať tak, že prejdete na prvý argument.

StaticFileOptions.FileProvider Určuje PhysicalFileProvider fyzický priečinok, na ktorý sa má vlastnosť odvolávať ako na statický súbor pri odovzdávaní inštancie systému . Súbor pod tu zadanou cestou je súbor, na ktorý možno odkazovať na webe. Môže to byť aj RequestPath koreň adresy URL pre nasledujúce vlastnosti:

env.ContentRootPath Vlastnosť obsahuje koreňovú cestu (fyzickú cestu) webového programu. Je vhodné skombinovať to s relatívnou cestou k cieľovému priečinku.

StaticFileOptions.RequestPath Vlastnosť popisuje koreňovú cestu url, ktorá odkazuje na statický súbor. Predvolená hodnota wwwroot https://<ホスト名> je založená na . Ako vo vyššie RequestPath = "/Site1" uvedenom kóde, ak píšete https://<ホスト名>/Site1 je koreň. To Areas/Site1/Content/xxxx spája fyzickú https://<ホスト名>/Site1/xxxx cestu s URL.

Pomocou sample1.png ako príklad, Areas/Site1/Content/image/sample.png súbor môže https://<ホスト名>/Site1/image/sample.png byť odkazované v ceste.

Skontrolovať operáciu

index.html Umiestnite značku img tak, aby ste mohli vidieť obrázok nasledovne: Cesta tiež odkazuje na obrázky site1 a site2, ako sú definované.

<!-- 省略 -->

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

Ak ho spustíte a uvidíte obrázok, je to úspech.