Col·locar fitxers estàtics en carpetes diferents de wwwroot

Medi ambient

Estudi Visual

• Estudi Visual 2019

Nucli ASP.NET

• 3.1 (Pàgina de la navalla, MVC)

Quant a la ubicació d'emplaçament per defecte per als fitxers estàtics

Els fitxers estàtics (.js, .css, .png, etc.) es determinen de manera predeterminada sota la carpeta wwwroot. Això permet als usuaris del lloc web veure els fitxers .js i .css directament juntament amb HTML i reflectir-los a la pantalla.

La carpeta de col·locació per defecte d'aquest fitxer estàtic és wwwroot Startup.Configure perquè crida al següent mètode descrit al app.UseStaticFiles mètode:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

El camí de la carpeta física "wwwroot" és "https://<nom de l'amfitrió>/" a l'adreça URL. Per exemple, el fitxer de wwwroot\image\sample.png es pot trobar a l'adreça URL a https://<nom de l'amfitrió>/imatge.png i mostra.]

Els fitxers situats fora de la carpeta wwwroot no es fan referència essencialment des d'una adreça URL del web.

Com col·locar fitxers estàtics a més de la carpeta wwwroot i canviar el camí de referència a l'URL

Configuració de la carpeta

Aquesta vegada, vull deixar la funció de la carpeta wwwroot, però també col·locar el fitxer d'imatge en una carpeta separada perquè es pugui fer referència a la web.

La configuració de la carpeta del projecte ha de ser la següent, de manera que pugueu veure els fitxers d'imatge a la carpeta Contingut de cada lloc a Les àrees.

En aquest estat, l'adreça URL .png el fitxer en exemple1.png

• https://<nom de l'amfitrió>/arenas/site1/content/image/sample1.png

I

• https://<Nom de l'amfitrió>/lloc1/contingut/imatge/mostra1.png

pot semblar que seria, però aquí

• https://<Nom de l'amfitrió>/lloc1/imatge/mostra1.png

per fer referència al .

Per cert, si col·loqueu un fitxer estàtic a més de la carpeta wwwroot, pot faltar l'acció de construcció del fitxer. Si continueu publicant, el fitxer no es col·locarà, així que assegureu-vos de tornar-lo a definir al contingut.

Afegeix un programa

Per fer que els fitxers estàtics estiguin disponibles en carpetes que no siguin de wwwroot, Startup.Configure truqueu a mètodes addicionals app.UseStaticFiles al mètode de la manera següent:

// 追加
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 Cridar el mètode sense arguments habilita la carpeta wwwroot. Podeu afegir StaticFileOptions configuracions addicionals passant al primer argument.

StaticFileOptions.FileProvider Especifica la PhysicalFileProvider carpeta física a la qual voleu que la propietat faci referència com a fitxer estàtic mentre passeu una instància del . El fitxer sota el camí especificat aquí és un fitxer al qual es pot fer referència al web. També pot ser RequestPath l'arrel de l'URL per a les propietats següents:

env.ContentRootPath La propietat conté el camí arrel (camí físic) del programa web. És una bona idea combinar-ho amb el camí relatiu a la carpeta de destí.

StaticFileOptions.RequestPath La propietat descriu el camí arrel de l'adreça URL que fa referència al fitxer estàtic. El valor per defecte de wwwroot https://<ホスト名> es basa en . Com en el RequestPath = "/Site1" codi anterior, si escriviu https://<ホスト名>/Site1 és l'arrel. Això Areas/Site1/Content/xxxx enllaça el camí físic https://<ホスト名>/Site1/xxxx amb l'adreça URL.

Utilitzant sample1.png com a exemple, Areas/Site1/Content/image/sample.png es pot fer referència al fitxer al https://<ホスト名>/Site1/image/sample.png camí.

Comprovació de l'operació

index.html Col·loqueu l'etiqueta img perquè pugueu veure la imatge de la manera següent: El camí també fa referència a les imatges site1 i site2 definides.

<!-- 省略 -->

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

Si l'executes i veus la imatge, és un èxit.