Letakkan fail statik dalam folder selain daripada wwwroot

Persekitaran

Visual Studio

• Studio Visual 2019

ASP.NET Teras

• 3.1 (Laman Cukur, MVC)

Peri tentang lokasi penempatan lalai untuk fail statik

Fail statik (.js, .css, .png, dan lain-lain) bertekad untuk berada di bawah folder wwwroot secara lalai. Ini membolehkan pengguna laman web melihat .js dan .css secara langsung bersama-sama dengan HTML dan mencerminkannya di skrin.

Folder peletakkan lalai untuk fail statik ini adalah wwwroot Startup.Configure kerana ia memanggil kaedah berikut yang app.UseStaticFiles diterangkan dalam kaedah:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

Laluan folder fizikal "wwwroot" adalah "https://<nama hos>/" dalam URL. Sebagai contoh, fail dalam wwwroot\image\sample.png boleh didapati dalam URL di bawah https://<nama hos>/image.png amp; sample.]

Fail yang diletakkan di luar folder wwwroot pada dasarnya tidak dirujuk daripada URL di Web.

Bagaimana untuk meletakkan fail statik sebagai tambahan kepada folder wwwroot dan menukar laluan rujukan di URL

Konfigurasi folder

Kali ini, saya ingin meninggalkan fungsi folder wwwroot, tetapi juga meletakkan fail imej dalam folder berasingan supaya ia boleh dirujuk di Web.

Konfigurasi folder projek sepatutnya seperti berikut, supaya anda dapat melihat fail imej dalam folder Kandungan setiap tapak di Kawasan.

Dalam keadaan ini, URL .png fail dalam sampel1.png

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

Dan

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

ia mungkin kelihatan seperti itu, tetapi di sini

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

untuk dirujuk dalam .

Dengan cara ini, jika anda meletakkan fail statik sebagai tambahan kepada folder wwwroot, tindakan membina fail mungkin hilang. Jika anda terus menerbitkan, fail itu tidak akan diletakkan, jadi pastikan anda menetapkannya kembali ke kandungan.

Tambah atur cara

Untuk menjadikan fail statik tersedia dalam folder bukan wwwroot, Startup.Configure hubungi kaedah tambahan dalam kaedah seperti 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 kaedah tanpa hujah membolehkan folder wwwroot. Anda boleh menambah StaticFileOptions seting tambahan dengan lulus ke hujah pertama.

StaticFileOptions.FileProvider Tentukan folder PhysicalFileProvider fizikal yang anda mahu harta itu dirujuk sebagai fail statik semasa lulus contoh . Fail di bawah laluan yang ditentukan di sini adalah fail yang boleh dirujuk di Web. Ia juga boleh RequestPath menjadi akar URL untuk sifat-sifat berikut:

env.ContentRootPath Tempat penginapan ini mengandungi laluan akar (laluan fizikal) program Web. Ia adalah idea yang baik untuk menggabungkan ini dengan laluan relatif ke folder sasaran.

StaticFileOptions.RequestPath Tempat penginapan ini menerangkan laluan akar URL yang merujuk fail statik. Wwwroot https://<ホスト名> lalai adalah berdasarkan . Seperti dalam kod RequestPath = "/Site1" di atas, jika anda menulis https://<ホスト名>/Site1 ialah akar. Ini Areas/Site1/Content/xxxx menghubungkan laluan fizikal dengan https://<ホスト名>/Site1/xxxx URL.

Menggunakan sample1.png sebagai contoh, Areas/Site1/Content/image/sample.png fail boleh https://<ホスト名>/Site1/image/sample.png dirujuk dalam laluan.

Semak operasi

index.html Letakkan tag img supaya anda dapat melihat imej seperti berikut: Laluan ini juga merujuk imej tapak1 dan tapak2 seperti yang ditakrifkan.

<!-- 省略 -->

<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 imej, ia adalah satu kejayaan.