Tempatkan file statis dalam folder selain wwwroot

Lingkungan

Visual Studio

• Studio Visual 2019

ASP.NET Inti

• 3.1 (Halaman silet, MVC)

Tentang lokasi penempatan default untuk file statis

File statis (.js, .css, .png, dll.) ditentukan berada di bawah folder wwwroot secara default. Ini memungkinkan pengguna situs web untuk melihat .js .css file langsung bersama dengan HTML dan mencerminkannya di layar.

Folder penempatan default untuk file statis ini adalah wwwroot Startup.Configure karena memanggil metode berikut yang dijelaskan dalam app.UseStaticFiles metode:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Jalur folder fisik "wwwroot" adalah "https://<host name>/" di URL. Sebagai contoh, berkas dalam wwwroot\image\sample.png dapat ditemukan di URL di bawah https://<host name>/image.png amp; sample.]

File yang ditempatkan di luar folder wwwroot pada dasarnya tidak direferensikan dari URL di Web.

Cara menempatkan file statis selain folder wwwroot dan mengubah jalur referensi di URL

Konfigurasi folder

Kali ini, saya ingin meninggalkan fungsi folder wwwroot, tetapi juga menempatkan file gambar di folder terpisah sehingga dapat direferensikan di Web.

Konfigurasi folder proyek harus sebagai berikut, sehingga Anda dapat melihat file gambar di folder Konten setiap situs di Area.

Dalam status ini, URL .png file dalam sample1.png

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

Dan

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

mungkin tampak seperti itu akan, tapi di sini

• https://<Nama host>/site1/image/sample1.png

untuk dirujuk dalam .

By the way, jika Anda menempatkan file statis selain folder wwwroot, tindakan build file mungkin hilang. Jika Anda terus menerbitkan, file tidak akan ditempatkan, jadi pastikan untuk mengembalikannya ke konten.

Tambah program

Untuk membuat file statis tersedia di folder non-wwwroot, Startup.Configure panggil metode tambahan dalam metode sebagai app.UseStaticFiles berikut:

// 追加
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 Memanggil metode tanpa argumen memungkinkan folder wwwroot. Anda dapat menambahkan StaticFileOptions pengaturan tambahan dengan meneruskan ke argumen pertama.

StaticFileOptions.FileProvider Menentukan PhysicalFileProvider folder fisik yang Anda inginkan untuk dirujuk properti sebagai file statis saat melewati contoh . File di bawah jalur yang ditentukan di sini adalah file yang dapat direferensikan di Web. Ini juga bisa RequestPath menjadi akar URL untuk properti berikut:

env.ContentRootPath Properti ini berisi jalur akar (jalur fisik) program Web. Adalah ide yang baik untuk menggabungkan ini dengan jalur relatif ke folder target.

StaticFileOptions.RequestPath Properti menjelaskan jalur akar URL yang mereferensikan file statis. Wwwroot default https://<ホスト名> didasarkan pada . Seperti dalam kode RequestPath = "/Site1" di atas, jika Anda menulis https://<ホスト名>/Site1 adalah akarnya. Areas/Site1/Content/xxxx Ini menghubungkan jalur fisik dengan https://<ホスト名>/Site1/xxxx URL.

Menggunakan contoh1.png sebagai contoh, Areas/Site1/Content/image/sample.png file dapat https://<ホスト名>/Site1/image/sample.png direferensikan dalam jalur.

Periksa operasi

index.html Tempatkan tag img sehingga Anda dapat melihat gambar sebagai berikut: Jalur ini juga mereferensikan gambar site1 dan site2 seperti yang didefinisikan.

<!-- 省略 -->

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

Jika Anda menjalankannya dan melihat gambar, itu sukses.