Postavi statične datoteke v mape, ki niso wwwroot

Okolje

Vizualni studio

• Vizualni studio 2019

ASP.NET Core

• 3.1 (Stran z britvicami, MVC)

O privzetem mestu postavitve za statične datoteke

Statične datoteke (.js, .css, .png itd.) so privzeto pod mapo wwwroot. To uporabnikom spletnih mest omogoča, da si .js in .css datoteke neposredno skupaj z HTML in jih odražajo na zaslonu.

Privzeta mapa za nastavitev te statične datoteke je wwwroot, ker kliče naslednjo metodo, Startup.Configure app.UseStaticFiles opisano v metodi:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Pot fizične mape »wwwroot« je »https://<ime gostitelja>/« v URL-ju. Kot primer, datoteko v wwwroot\image\sample.png lahko najdete v URL pod https://<ime gostitelja>/slika.png amp; vzorec.]

Datoteke, ki so dane zunaj mape wwwroot, se v bistvu ne sklicuje na URL v spletu.

Kako namestiti statične datoteke poleg mape wwwroot in spremeniti referenčno pot na URL

Konfiguracija mape

Tokrat želim zapustiti funkcijo mape wwwroot, ampak tudi slikovne datoteke v ločeno mapo, tako da se lahko sklicuje na spletu.

Konfiguracija mape projekta mora biti naslednja, tako da si lahko slikovne datoteke vidite v mapi Vsebina vsakega mesta v Območjih.

V tem stanju je URL .png datoteko v vzorcu1.png

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

In

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

morda se zdi, da bi bilo, ampak tukaj

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

ki se napotijo v .

Mimogrede, če poleg mape wwwroot postavite statično datoteko, morda manjka dejanje gradnje datoteke. Če boste še naprej objavljali, datoteka ne bo oddana, zato jo nastavite nazaj na vsebino.

Dodajanje programa

Če želite, da so statične datoteke na voljo v mapah, ki niso wwwroot, pokličite dodatne metode na Startup.Configure app.UseStaticFiles naslednji način:

// 追加
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 Klicanje metode brez argumentov omogoča mapo wwwroot. Dodatne nastavitve lahko dodate StaticFileOptions tako, da se predate prvemu argumentu.

StaticFileOptions.FileProvider Določa fizično mapo, ki jo želite lastnost sklicevati kot statično datoteko med podajo PhysicalFileProvider primerka . Datoteka pod tukaj določeno potjo je datoteka, ki se lahko sklicuje na splet. Lahko je tudi koren RequestPath URL-ja za te lastnosti:

env.ContentRootPath Lastnost vsebuje korensko pot (fizično pot) spletnega programa. Dobro je, da to združite z relativno potjo do ciljne mape.

StaticFileOptions.RequestPath Lastnost opisuje korensko pot URL-ja, ki se sklicuje na statično datoteko. Privzeti wwwroot https://<ホスト名> temelji na . Kot v zgornji RequestPath = "/Site1" kodi, če pišete je https://<ホスト名>/Site1 korenina. To povezuje Areas/Site1/Content/xxxx fizično pot https://<ホスト名>/Site1/xxxx z URL-jem.

Če uporabite vzorec1.png primer, se lahko datoteka Areas/Site1/Content/image/sample.png https://<ホスト名>/Site1/image/sample.png sklicuje na pot.

Preverjanje operacije

index.html Postavite oznako img tako, da si lahko sliko ogledate na naslednji način: Pot se sklicuje tudi na slike mesta1 in mesta2, kot je določeno.

<!-- 省略 -->

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

Če jo zaženete in vidite sliko, je to uspeh.