Platzieren statischer Dateien in anderen Ordnern als wwwroot

Umgebung

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (Razor-Seite, MVC)

Informationen zum Standardspeicherort für statische Dateien

Statische Dateien (.js, .css, .png usw.) werden standardmäßig unter dem Ordner wwwroot festgelegt. Dadurch können Websitebenutzer die .js und .css Dateien direkt zusammen mit HTML sehen und auf dem Bildschirm reflektieren.

Der Standardplatzierungsordner für diese statische Datei ist wwwroot, Startup.Configure da die folgende Methode aufruft, die in der Methode beschrieben app.UseStaticFiles wird:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Der Pfad des physischen Ordners "wwwroot" ist "https://<host name>/" in der URL. Als Beispiel finden Sie die Datei in wwwroot-Image-Beispiel.png in der URL unter https://<host name>/image.png amp; sample.]

Dateien, die außerhalb des ordners wwwroot platziert werden, werden im Wesentlichen nicht von einer URL im Web referenziert.

So platzieren Sie statische Dateien zusätzlich zum Ordner wwwroot und ändern den Referenzpfad unter der URL

Ordnerkonfiguration

Dieses Mal möchte ich die Funktion des Ordners wwwroot belassen, aber auch die Bilddatei in einem separaten Ordner platzieren, damit sie im Web referenziert werden kann.

Die Ordnerkonfiguration des Projekts sollte wie folgt aussehen, damit Sie die Bilddateien im Ordner Inhalt jeder Website in Den Bereichen sehen können.

In diesem Zustand .png die URL die Datei in Beispiel1.png

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

Und

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

es mag scheinen, als ob es sein würde, aber hier

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

in referenziert werden.

Wenn Sie übrigens zusätzlich zum Ordner wwwroot eine statische Datei platzieren, fehlt möglicherweise die Buildaktion der Datei. Wenn Sie mit der Veröffentlichung fortfahren, wird die Datei nicht abgelegt, also stellen Sie sicher, dass Sie sie wieder auf Den Inhalt zurücksetzen.

Hinzufügen eines Programms

Um statische Dateien in Nicht-wwwroot-Ordnern verfügbar zu Startup.Configure machen, rufen Sie zusätzliche app.UseStaticFiles Methoden in der Methode wie folgt auf:

// 追加
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 Wenn Sie die Methode ohne Argumente aufrufen, wird der Ordner wwwroot aktiviert. Sie können zusätzliche Einstellungen hinzufügen, StaticFileOptions indem Sie das erste Argument übergeben.

StaticFileOptions.FileProvider Gibt den physischen Ordner an, PhysicalFileProvider auf den die Eigenschaft als statische Datei verweisen soll, während eine Instanz von übergeben wird. Die Datei unter dem hier angegebenen Pfad ist eine Datei, auf die im Web verwiesen werden kann. Es kann auch der RequestPath Stamm der URL für die folgenden Eigenschaften sein:

env.ContentRootPath Die Eigenschaft enthält den Stammpfad (physischen Pfad) des Webprogramms. Es ist eine gute Idee, dies mit dem relativen Pfad zum Zielordner zu kombinieren.

StaticFileOptions.RequestPath Die Eigenschaft beschreibt den Stammpfad der URL, die auf die statische Datei verweist. Die Standardversion von wwwroot https://<ホスト名> basiert auf . Wie im RequestPath = "/Site1" obigen Code, wenn Sie https://<ホスト名>/Site1 ist die Wurzel. Dadurch Areas/Site1/Content/xxxx wird der physische Pfad mit der URL https://<ホスト名>/Site1/xxxx angezeigt.

Anhand von beispiel1.png Areas/Site1/Content/image/sample.png kann die Datei https://<ホスト名>/Site1/image/sample.png im Pfad referenziert werden.

Prüfvorgang

index.html Platzieren Sie das img-Tag, damit Sie das Bild wie folgt sehen können: Der Pfad verweist auch auf Site1- und Site2-Images wie definiert.

<!-- 省略 -->

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

Wenn Sie es ausführen und das Bild sehen, ist es ein Erfolg.