Coloque archivos estáticos en carpetas distintas de wwwroot

medio ambiente

Estudio visual

• Visual Studio 2019

Núcleo de ASP.NET

• 3.1 (Página de Razor, MVC)

Acerca de la ubicación de ubicación predeterminada para los archivos estáticos

Los archivos estáticos (.js, .css, .png, etc.) se determinan que están en la carpeta wwwroot de forma predeterminada. Esto permite a los usuarios del sitio web ver los archivos de .js y .css directamente junto con HTML y reflejarlos en la pantalla.

La carpeta de ubicación predeterminada para este archivo estático es wwwroot Startup.Configure porque llama al siguiente método descrito en el app.UseStaticFiles método:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

La ruta de acceso de la carpeta física "wwwroot" es "https://<host name>/" en la dirección URL. Por ejemplo, el archivo en wwwroot\image\sample.png se puede encontrar en la dirección URL en https://<host name>/image.png amp; sample.]

Los archivos colocados fuera de la carpeta wwwroot esencialmente no se hace referencia desde una dirección URL en la Web.

Cómo colocar archivos estáticos además de la carpeta wwwroot y cambiar la ruta de referencia en la DIRECCIÓN URL

Configuración de carpetas

Esta vez, quiero dejar la función de la carpeta wwwroot, pero también colocar el archivo de imagen en una carpeta independiente para que se pueda hacer referencia a él en la Web.

La configuración de carpetas del proyecto debe ser la siguiente, de modo que pueda ver los archivos de imagen en la carpeta Contenido de cada sitio en Las áreas.

En este estado, la dirección URL .png el archivo en sample1.png

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

y

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

puede parecer que sería, pero aquí

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

para ser referenciado en .

Por cierto, si coloca un archivo estático además de la carpeta wwwroot, es posible que falte la acción de compilación del archivo. Si continúa publicando, el archivo no se colocará, así que asegúrese de volver a establecerlo en contenido.

Añadir un programa

Para que los archivos estáticos estén disponibles en carpetas que no sean Startup.Configure wwwroot, llame a métodos adicionales en el método de la siguiente app.UseStaticFiles manera:

// 追加
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 Llamar al método sin argumentos habilita la carpeta wwwroot. Puede agregar configuraciones adicionales StaticFileOptions pasando al primer argumento.

StaticFileOptions.FileProvider Especifica la PhysicalFileProvider carpeta física a la que desea que la propiedad haga referencia como un archivo estático mientras pasa una instancia de . El archivo bajo la ruta especificada aquí es un archivo al que se puede hacer referencia en la Web. También puede ser la RequestPath raíz de la dirección URL para las siguientes propiedades:

env.ContentRootPath La propiedad contiene la ruta de acceso raíz (ruta física) del programa Web. Es una buena idea combinar esto con la ruta relativa a la carpeta de destino.

StaticFileOptions.RequestPath La propiedad describe la ruta de acceso raíz de la dirección URL que hace referencia al archivo estático. La wwwroot predeterminada https://<ホスト名> se basa en . Al igual que en el RequestPath = "/Site1" código anterior, si escribe https://<ホスト名>/Site1 es la raíz. Esto Areas/Site1/Content/xxxx vincula la ruta de acceso física con la dirección https://<ホスト名>/Site1/xxxx URL.

Con sample1.png como ejemplo, Areas/Site1/Content/image/sample.png se puede hacer referencia al archivo https://<ホスト名>/Site1/image/sample.png en la ruta de acceso.

Comprobar la operación

index.html Coloque la etiqueta img para que pueda ver la imagen de la siguiente manera: La ruta también hace referencia a las imágenes site1 y site2 tal como se definen.

<!-- 省略 -->

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

Si lo ejecutas y ves la imagen, es un éxito.