Inserire file statici in cartelle diverse da wwwroot

ambiente

Visual Studio

• Visual Studio 2019

ASP.NET Nucleo

• 3.1 (pagina Razor, MVC)

Informazioni sul percorso di posizionamento predefinito per i file statici

I file statici (.js, .css, .png, ecc.) sono determinati per impostazione predefinita sotto la cartella wwwroot. Ciò consente agli utenti del sito Web di visualizzare .js e .css file direttamente insieme all'HTML e rifletterli sullo schermo.

La cartella di posizionamento predefinita per questo file statico è wwwroot Startup.Configure perché chiama il seguente metodo descritto nel metodo app.UseStaticFiles :

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Il percorso della cartella fisica "wwwroot" è "https://<nome host>/" nell'URL. Ad esempio, il file in wwwroot\image\sample.png è disponibile nell'URL in https://<nome host>/image.png amp; sample.]

I file inseriti all'esterno della cartella wwwroot non fanno essenzialmente riferimento a un URL sul Web.

Come inserire file statici oltre alla cartella wwwroot e modificare il percorso di riferimento nell'URL

Configurazione delle cartelle

Questa volta, voglio lasciare la funzione della cartella wwwroot, ma anche inserire il file di immagine in una cartella separata in modo che possa essere referenziato sul Web.

La configurazione della cartella del progetto deve essere la seguente, in modo da poter visualizzare i file di immagine nella cartella Contenuto di ogni sito in Aree.

In questo stato, l'URL .png il file in sample1.png

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

e

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

può sembrare che sarebbe, ma qui

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

a cui fare riferimento in .

A proposito, se si posiziona un file statico oltre alla cartella wwwroot, potrebbe mancare l'azione di compilazione del file. Se si continua a pubblicare, il file non verrà inserito, quindi assicurarsi di impostarlo di nuovo sul contenuto.

Aggiungere un programma

Per rendere disponibili i file statici nelle cartelle non Startup.Configure wwwroot, chiamare metodi aggiuntivi nel metodo come app.UseStaticFiles segue:

// 追加
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 La chiamata al metodo senza argomenti abilita la cartella wwwroot. È possibile aggiungere StaticFileOptions impostazioni aggiuntive passando al primo argomento.

StaticFileOptions.FileProvider Specifica la PhysicalFileProvider cartella fisica a cui si desidera che la proprietà si riferisca come file statico durante il passaggio di un'istanza di . Il file sotto il percorso specificato qui è un file a cui è possibile fare riferimento sul Web. Può anche essere la RequestPath radice dell'URL per le seguenti proprietà:

env.ContentRootPath La proprietà contiene il percorso radice (percorso fisico) del programma Web. È una buona idea combinarlo con il percorso relativo della cartella di destinazione.

StaticFileOptions.RequestPath La proprietà descrive il percorso radice dell'URL che fa riferimento al file statico. Il codice wwwroot https://<ホスト名> predefinito è basato su . Come nel codice RequestPath = "/Site1" precedente, se si scrive https://<ホスト名>/Site1 è la radice. In Areas/Site1/Content/xxxx questo modo il percorso fisico viene https://<ホスト名>/Site1/xxxx collegato all'URL.

Utilizzando sample1.png come esempio, Areas/Site1/Content/image/sample.png è possibile fare riferimento al file https://<ホスト名>/Site1/image/sample.png nel percorso.

Controllare l'operazione

index.html Posizionare il tag img in modo da poter vedere l'immagine come segue: Il percorso fa inoltre riferimento alle immagini site1 e site2 come definito.

<!-- 省略 -->

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

Se lo esegui e vedi l'immagine, è un successo.