स्थैतिक फाइलों को wwwroot के अलावा अन्य फ़ोल्डर में रखें

पर्यावरण

विजुअल स्टूडियो

• विजुअल स्टूडियो 2019

ASP.NET कोर

• 3.1 (रेजर पेज, एमवीसी)

स्थिर फ़ाइलों के लिए डिफ़ॉल्ट प्लेसमेंट स्थान के बारे में

स्थैतिक फाइलें (.js, .css, .png, आदि) डिफ़ॉल्ट रूप से wwwroot फ़ोल्डर के तहत होना निर्धारित कर रहे हैं। यह वेब साइट उपयोगकर्ताओं को .JS देखने और सीधे HTML के साथ फ़ाइलों .css और उन्हें स्क्रीन पर प्रतिबिंबित करने की अनुमति देता है।

इस स्थिर फ़ाइल के लिए डिफ़ॉल्ट प्लेसमेंट फ़ोल्डर wwwroot है Startup.Configure क्योंकि यह विधि में वर्णित निम्नलिखित विधि app.UseStaticFiles कहता है:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

यूआरएल में भौतिक फ़ोल्डर "wwwroot" का मार्ग "https://<host name>/" है। एक उदाहरण के रूप में, wwwroot\image\नमूना में फ़ाइल.png https://<host name>/image.png के तहत यूआरएल में पाया जा सकता है।

wwwroot फ़ोल्डर के बाहर रखी फ़ाइलें अनिवार्य रूप से वेब पर एक यूआरएल से संदर्भित नहीं कर रहे हैं ।

wwwroot फ़ोल्डर के अलावा स्थिर फ़ाइलों को कैसे रखें और यूआरएल पर संदर्भ पथ को कैसे बदलें

फ़ोल्डर कॉन्फ़िगरेशन

इस बार, मैं wwwroot फ़ोल्डर के फ़ंक्शन को छोड़ना चाहता हूं, लेकिन छवि फ़ाइल को एक अलग फ़ोल्डर में भी रखना चाहता हूं ताकि इसे वेब पर संदर्भित किया जा सके।

परियोजना का फ़ोल्डर कॉन्फ़िगरेशन इस प्रकार होना चाहिए, ताकि आप क्षेत्रों में प्रत्येक साइट के सामग्री फ़ोल्डर में छवि फ़ाइलों को देख सकें।

इस स्थिति में, यूआरएल .png फाइल को सैंपल में .png.png

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

और

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

ऐसा लग सकता है जैसे यह होगा, लेकिन यहां

• https://lt;Hostname>/site1/image/sample1.png

में संदर्भित किया जाना .

वैसे, अगर आप wwwroot फ़ोल्डर के अलावा एक स्थिर फ़ाइल जगह है, फ़ाइल के निर्माण कार्रवाई गायब हो सकता है। यदि आप प्रकाशित करना जारी रखते हैं, तो फ़ाइल नहीं रखी जाएगी, इसलिए इसे सामग्री पर वापस सेट करना सुनिश्चित करें।

एक कार्यक्रम जोड़ें

गैर-wwwroot फ़ोल्डर्स में स्थिर फ़ाइलों को उपलब्ध कराने Startup.Configure के लिए, विधि में अतिरिक्त तरीकों को इस प्रकार कॉल 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 है:

env.ContentRootPath संपत्ति में वेब कार्यक्रम का मूल पथ (भौतिक पथ) होता है। लक्ष्य फ़ोल्डर के सापेक्ष मार्ग के साथ इसे जोड़ना एक अच्छा विचार है।

StaticFileOptions.RequestPath संपत्ति यूआरएल के मूल पथ का वर्णन करती है जो स्थिर फ़ाइल का संदर्भ देती है। डिफ़ॉल्ट wwwroot https://<ホスト名> पर आधारित है । उपरोक्त कोड की RequestPath = "/Site1" तरह, यदि आप लिखते हैं https://<ホスト名>/Site1 जड़ है। यह Areas/Site1/Content/xxxx यूआरएल के साथ भौतिक https://<ホスト名>/Site1/xxxx पथ को जोड़ता है।

उदाहरण के रूप में sample1.png का उपयोग करके, Areas/Site1/Content/image/sample.png फ़ाइल को पथ में संदर्भित किया जा https://<ホスト名>/Site1/image/sample.png सकता है।

जांच ऑपरेशन

index.html आईएमजी टैग रखें ताकि आप छवि को इस प्रकार देख सकें: पथ भी परिभाषित के रूप में 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" />
<!-- ここまで追加 -->

यदि आप इसे चलाते हैं और छवि देखते हैं, तो यह एक सफलता है।