Placere statiske filer i andre mapper end wwwroot
Miljø
- Visual Studio
-
- Visual Studio 2019
- ASP.NET Kerne
-
- 3.1 (Barberbladsside, MVC)
Om standardplaceringsplaceringen for statiske filer
Statiske filer (.js, .css, .png osv.) er fast besluttet på at være under wwwroot-mappen som standard. Dette gør det muligt for webstedsbrugere at se .js og .css filer direkte sammen med HTML og reflektere dem på skærmen.
Standardplaceringsmappen for denne statiske fil er Startup.Configure
wwwroot, fordi den kalder følgende app.UseStaticFiles
metode, der er beskrevet i metoden:
public class Startup
{
// 省略
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// 省略
app.UseStaticFiles();
// 省略
}
}
Stien til den fysiske mappe "wwwroot" er "https://<værtsnavn>/" i URL-adressen. Filen i wwwroot\image\sample.png findes i URL-adressen under https://<værtsnavn>/billede.png og eksempel.]
Filer placeret uden for wwwroot-mappen refereres i det væsentlige ikke fra en URL-adresse på internettet.
Sådan placeres statiske filer ud over mappen wwwroot, og referencestien ændres på URL-adressen
Konfiguration af mappe
Denne gang, jeg ønsker at forlade funktionen af wwwroot mappe, men også placere billedfilen i en separat mappe, så det kan refereres til på internettet.
Projektets mappekonfiguration skal være som følger, så du kan se billedfilerne i mappen Indhold på hvert websted i Områderne.
I denne tilstand .png URL-adressen filen i eksempel1.png
- https://<værtsnavn>/arenaer/site1/content/image/sample1.png
Og
- https://<Værtsnavn>/websted1/indhold/billede/eksempel1.png
det kan synes som det ville være, men her
- https://<Værtsnavn>/websted1/billede/eksempel1.png
der henvises til i .
Hvis du placerer en statisk fil ud over mappen wwwroot, mangler filens buildhandling muligvis. Hvis du fortsætter med at udgive, placeres filen ikke, så sørg for at indstille den til indhold igen.
Tilføje et program
Hvis du vil gøre statiske filer tilgængelige i Startup.Configure
ikke-wwwroot-mapper, skal du kalde yderligere app.UseStaticFiles
metoder i metoden på følgende måde:
// 追加
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
Hvis du kalder metoden uden argumenter, aktiveres mappen wwwroot.
Du kan tilføje yderligere StaticFileOptions
indstillinger ved at overføre til det første argument.
StaticFileOptions.FileProvider
Angiver den PhysicalFileProvider
fysiske mappe, som egenskaben skal referere til som en statisk fil, mens der overføres en forekomst af .
Filen under den sti, der er angivet her, er en fil, der kan refereres til på World Wide Web.
Det kan også være RequestPath
roden til URL-adressen til følgende egenskaber:
env.ContentRootPath
Egenskaben indeholder webprogrammets rodsti (fysiske sti).
Det er en god ide at kombinere dette med den relative sti til destinationsmappen.
StaticFileOptions.RequestPath
Egenskaben beskriver rodstien for den URL-adresse, der refererer til den statiske fil.
Standard-wwwroot https://<ホスト名>
er baseret på .
Som i RequestPath = "/Site1"
ovenstående kode, hvis du skriver
https://<ホスト名>/Site1
er roden.
Dette Areas/Site1/Content/xxxx
sammenkæder den fysiske https://<ホスト名>/Site1/xxxx
sti med URL-adressen.
Hvis du bruger eksempel1.png som eksempel, Areas/Site1/Content/image/sample.png
kan der refereres til filen https://<ホスト名>/Site1/image/sample.png
i stien.
Kontroller handling
index.html
Placer img-tagget, så du kan se billedet på følgende måde:
Stien refererer også til site1- og site2-billeder som defineret.
<!-- 省略 -->
<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" />
<!-- ここまで追加 -->
Hvis du kører det og se billedet, er det en succes.