วางไฟล์แบบคงที่ในโฟลเดอร์อื่นที่ไม่ใช่ wwwroot

สิ่งแวดล้อม

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (หน้า Razor, MVC)

เกี่ยวกับตําแหน่งการจัดวางเริ่มต้นสําหรับแฟ้มแบบคงที่

โดยค่าเริ่มต้น แฟ้มแบบคงที่ (.js .css .png ฯลฯ) จะยังคงอยู่ในโฟลเดอร์ wwwroot วิธีนี้ช่วยให้ผู้ใช้เว็บไซต์สามารถดูและ.jsและ.cssและ HTML ได้โดยตรงและเผยแพร่บนหน้าจอ

โฟลเดอร์การปรับใช้เริ่มต้นสําหรับแฟ้มแบบคงที่ Startup.Configure นี้คือ wwwroot ซึ่งเรียก app.UseStaticFiles วิธีการต่อไปนี้ที่อธิบายไว้ในวิธีการ:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

เส้นทางของโฟลเดอร์ที่มีอยู่จริง "wwwroot" คือส่วนของ "https://< ชื่อโฮสต์ >/" ใน URL ตัวอย่างเช่น แฟ้มใน "wwwroot\image\sample.png" สามารถอ้างอิงใน URL ผ่าน https://< ชื่อโฮสต์ >/image/sample.pngใน URL

ไฟล์ที่วางไว้นอกโฟลเดอร์ wwwroot ไม่สามารถอ้างอิงได้จาก URL บนเว็บ

วิธีการวางแฟ้มแบบคงที่ภายนอกโฟลเดอร์ wwwroot และเปลี่ยนเส้นทางการอ้างอิงใน URL

การกําหนดค่าโฟลเดอร์

เวลา นี้ ฉัน ต้องการ วาง ไฟล์ ภาพ ใน โฟลเดอร์ แยก เพื่อ อ้างอิง ใน เว็บ ใน ขณะ ที่ การ รักษา คุณสมบัติ ของ โฟลเดอร์ wwwroot.

การกําหนดค่าโฟลเดอร์ของโครงการแสดงอยู่ด้านล่างเพื่ออ้างอิงแฟ้มรูปในโฟลเดอร์เนื้อหาของแต่ละไซต์ใน Areas

ในสถานะนี้ URL ที่อ้างอิงไฟล์.png sample1 คือ

• 10/10.png 2014

และ

• 28/10.png 2014

อาจดูเหมือน แต่ที่นี่

• ชื่อโฮสต์ >/site1/image/sample1.png

ระบุการอ้างอิงใน

โดยวิธีการที่ถ้าคุณวางไฟล์แบบคงที่นอกโฟลเดอร์ wwwroot การดําเนินการ สร้างไฟล์ อาจเป็น "ไม่มี" ถ้าคุณดําเนินการต่อ การประกาศจะไม่วางแฟ้ม ดังนั้นโปรดตรวจสอบให้แน่ใจว่า แฟ้มถูกตั้งค่า ใหม่เป็นเนื้อหา

เพิ่มโปรแกรม

เมื่อต้องการอนุญาตให้อ้างอิงแฟ้มแบบคงที่ในโฟลเดอร์อื่นที่ไม่ใช่ Startup.Configure wwwroot app.UseStaticFiles เรียกวิธีการอื่น ๆ ในวิธีการเป็นดังนี้:

// 追加
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 การเรียกเมธอดโดยไม่มีพารามิเตอร์จะเปิดใช้งานโฟลเดอร์ wwwroot การตั้งค่าเพิ่มเติม StaticFileOptions สามารถทําได้เมื่อส่งผ่านไปยังพารามิเตอร์แรก

StaticFileOptions.FileProvider ส่ง PhysicalFileProvider ผ่านอินสแตนซ์ของคุณสมบัติไปยัง และระบุโฟลเดอร์ที่มีอยู่จริงที่คุณต้องการอ้างอิงเป็นแฟ้มแบบคงที่ แฟ้มภายใต้เส้นทางที่ระบุที่นี่เป็นแฟ้มที่เว็บสามารถอ้างอิงได้ นอกจากนี้ยังเป็น RequestPath รากของ URL สําหรับคุณสมบัติต่อไปนี้:

env.ContentRootPath คุณสมบัติประกอบด้วยเส้นทางราก (เส้นทางที่มีอยู่จริง) ไปยังโปรแกรมเว็บ คุณสามารถผสานเส้นทางนี้กับเส้นทางสัมพัทธ์ของโฟลเดอร์ปลายทางได้

StaticFileOptions.RequestPath คุณสมบัติอธิบายเส้นทางรากของ URL ที่อ้างอิงถึงแฟ้มแบบคงที่ เริ่มต้น https://<ホスト名> wwwroot เป็น ดังที่แสดงใน RequestPath = "/Site1" รหัสข้างต้น https://<ホスト名>/Site1 มันเป็นราก การดําเนินการ Areas/Site1/Content/xxxx นี้จะเชื่อมโยง URL https://<ホスト名>/Site1/xxxx กับเส้นทางทางกายภาพของ

ตัวอย่างเช่น .pngไฟล์ Areas/Site1/Content/image/sample.png https://<ホスト名>/Site1/image/sample.png สามารถอ้างอิงเป็นเส้นทางได้

การยืนยันการดําเนินการ

index.html วางแท็ก img ใน เพื่อให้คุณสามารถอ้างอิงรูปภาพได้ดังนี้ เส้นทางยังอ้างอิงรูปภาพของ site1 และ site2 เพื่อกําหนด

<!-- 省略 -->

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

ถ้าคุณเรียกใช้มันและเห็นภาพก็ประสบความสําเร็จ