Coloque arquivos estáticos em pastas diferentes do wwwroot

ambiente

Estúdio Visual

• Visual Studio 2019

Núcleo ASP.NET

• 3.1 (Página de navalha, MVC)

Sobre o local de colocação padrão para arquivos estáticos

Arquivos estáticos (.js, .css, .png, etc.) estão determinados a estar sob a pasta wwwroot por padrão. Isso permite que os usuários do site vejam os arquivos .js e .css diretamente junto com HTML e reflita-os na tela.

A pasta de colocação padrão deste arquivo estático é wwwroot Startup.Configure porque ele chama o seguinte método descrito no app.UseStaticFiles método:

public class Startup
{
  // 省略

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

    app.UseStaticFiles();

    // 省略
  }
}

O caminho da pasta física "wwwroot" é "https://<host name>/" na URL. Como exemplo, o arquivo em wwwroot\image\sample.png pode ser encontrado na URL em https://<host name>/image.png amp; sample.]

Os arquivos colocados fora da pasta wwwroot não são essencialmente referenciados a partir de uma URL na Web.

Como colocar arquivos estáticos além da pasta wwwroot e alterar o caminho de referência na URL

Configuração da pasta

Desta vez, quero deixar a função da pasta wwwroot, mas também colocar o arquivo de imagem em uma pasta separada para que possa ser referenciado na Web.

A configuração da pasta do projeto deve ser a seguinte, para que você possa ver os arquivos de imagem na pasta Conteúdo de cada site nas Áreas.

Neste estado, a URL .png o arquivo na amostra1.png

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

e

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

pode parecer que seria, mas aqui

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

a ser referenciado em .

A propósito, se você colocar um arquivo estático além da pasta wwwroot, a ação de compilação do arquivo pode estar faltando. Se você continuar a publicar, o arquivo não será colocado, por isso certifique-se de desvê-lo ao conteúdo.

Adicione um programa

Para disponibilizar arquivos estáticos em pastas não-wwwroot, Startup.Configure ligue para métodos adicionais app.UseStaticFiles no método da seguinte forma:

// 追加
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 Chamar o método sem argumentos permite a pasta wwwroot. Você pode adicionar configurações adicionais StaticFileOptions passando para o primeiro argumento.

StaticFileOptions.FileProvider Especifica a PhysicalFileProvider pasta física a que deseja que a propriedade se consulte como um arquivo estático ao passar por uma instância de . O arquivo no caminho especificado aqui é um arquivo que pode ser referenciado na Web. Também pode ser a RequestPath raiz da URL para as seguintes propriedades:

env.ContentRootPath A propriedade contém o caminho raiz (caminho físico) do programa Web. É uma boa ideia combinar isso com o caminho relativo para a pasta alvo.

StaticFileOptions.RequestPath A propriedade descreve o caminho raiz da URL que faz referência ao arquivo estático. O wwwroot padrão https://<ホスト名> é baseado em . Como no RequestPath = "/Site1" código acima, se você escrever https://<ホスト名>/Site1 é a raiz. Isso Areas/Site1/Content/xxxx vincula o caminho físico https://<ホスト名>/Site1/xxxx com a URL.

Usando a amostra1.png como exemplo, Areas/Site1/Content/image/sample.png o arquivo pode ser https://<ホスト名>/Site1/image/sample.png referenciado no caminho.

Verificar a operação

index.html Coloque a tag img para que você possa ver a imagem da seguinte forma: O caminho também faz referência às imagens do site1 e do site2 conforme definido.

<!-- 省略 -->

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

Se você executá-lo e ver a imagem, é um sucesso.