ASP.NET Core Blazor の静的ファイル

2025-05-06

注

これは、この記事の最新バージョンではありません。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。詳細については、 .NET および .NET Core サポートポリシーを参照してください。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

この記事では、Blazor アプリで静的ファイルを提供する構成について説明します。

Map Static Assets ルーティングエンドポイント規則を使用して静的ファイルを提供する方法の一般的な情報については、この記事を読む前に、ASP.NET Core で静的ファイルをマップするを参照してください。

プリロードされた Blazor フレームワークの静的アセット

Blazor Web Appでは、フレームワークの静的アセットは、Link ヘッダーを使用して自動的にプリロードされます。これにより、初期ページがフェッチおよびレンダリングされる前に、ブラウザーでリソースをプリロードできます。

スタンドアロンBlazor WebAssemblyアプリでは、ブラウザーindex.htmlページ処理の早い段階でフレームワーク資産の優先度の高いダウンロードとキャッシュが実行されるようにスケジュールされますが、条件として次の場合になります。

アプリのプロジェクトファイル (OverrideHtmlAssetPlaceholders) の .csproj MSBuild プロパティは、trueに設定されます。
```
<PropertyGroup>
  <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
</PropertyGroup>
```
<link>のrel="preload"コンテンツには、<head>を含む次のwwwroot/index.html要素が存在します。
```
<link rel="preload" id="webassembly" />
```

サーバー側の Blazor アプリでの静的資産の配信

静的資産の提供は、次の表で説明するルーティングエンドポイント規則またはミドルウェアによって管理されます。

機能	API (アプリケーション・プログラミング・インターフェース)	.NET のバージョン	説明
静的資産ルーティングエンドポイント規則のマップ	MapStaticAssets	.NET 9 以降	クライアントへの静的資産の配信を最適化します。
静的ファイルミドルウェア	UseStaticFiles	すべての .NET バージョン	静的アセットのマップを最適化せずにクライアントに静的アセットを提供しますが、Map Static Assets が管理できない一部のタスクに役立ちます。

静的アセットのマップは、ほとんどの状況で UseStaticFiles を置き換えることができます。ただし、Map Static Assets は、ビルド時と発行時にアプリ内の既知の場所からアセットを提供するために最適化されています。アプリがディスクや埋め込みリソースなど、他の場所からアセットを提供する場合は、UseStaticFiles を使用する必要があります。

静的アセットのマップ (MapStaticAssets) は、UseBlazorFrameworkFiles フレームワークファイルを提供するアプリでの呼び出し Blazor WebAssembly も置き換えます。また、UseBlazorFrameworkFilesを呼び出すときに API が自動的に呼び出されるため、Blazor Web App で AddInteractiveWebAssemblyComponents を明示的に呼び出す必要はありません。

対話型 WebAssembly または対話型自動レンダリングモードが有効な場合:

Blazor により、リソースコレクションを JS モジュールとして公開するエンドポイントが作成されます。
WebAssembly コンポーネントがページにレンダリングされると、URL は永続化されたコンポーネント状態として要求の本文に出力されます。
WebAssembly の起動時に、Blazor により、URL を取得し、モジュールをインポートし、資産コレクションを取得する関数を呼び出し、メモリ内に再構築する処理が行われます。 URL はコンテンツに固有であり、無期限にキャッシュされるため、このオーバーヘッドコストがかかるのは、アプリが更新されるまでユーザーごとに 1 回のみです。
リソースコレクションは人間が判読できる URL (_framework/resource-collection.js) でも公開されているため、JS からリソースコレクションにアクセスして強化されたナビゲーションを利用したり、他のフレームワークとサードパーティコンポーネントの機能を実装したりすることができます。

静的ファイルミドルウェア (UseStaticFiles) は、静的アセットのマップ (MapStaticAssets) で処理できない次の状況で役立ちます。

ビルドまたは発行プロセスの一部ではないディスクからのファイルの提供 (デプロイ中またはデプロイ後にアプリケーションフォルダーに追加されたファイルなど)。
Blazor WebAssembly 静的資産ファイルへのパスプレフィックスの適用。これについては、「Blazor WebAssembly 資産のプレフィックス」セクションで説明します。
特定のコンテンツタイプへの拡張機能のファイルマッピングの構成、およびと静的ファイルオプションの設定。これについては、「ファイルマッピングと静的ファイルのオプション」セクションで説明します。

詳細については、「ASP.NET Core の静的ファイル」をご覧ください。

マップ静的資産ルーティングエンドポイント規則を使用して資産を配信する

このセクションは、サーバー側の Blazor アプリに適用されます。

アセットは、 ComponentBase.Assets プロパティを介して配信されます。このプロパティは、特定の資産のフィンガープリントされた URL を解決します。次の例では、Bootstrap、Blazor プロジェクトテンプレートアプリスタイルシート (app.css)、および ( のアプリの名前空間に基づく) BlazorSampleはルートコンポーネント (通常はApp コンポーネント (Components/App.razor) にリンクされています。

<link rel="stylesheet" href="@Assets["bootstrap/bootstrap.min.css"]" />
<link rel="stylesheet" href="@Assets["app.css"]" />
<link rel="stylesheet" href="@Assets["BlazorSample.styles.css"]" />

`ImportMap` コンポーネント

このセクションは、Blazor Web Appを呼び出すMapRazorComponentsに適用されます。

ImportMap コンポーネント (ImportMap) は、モジュールスクリプトのインポートマップを定義するインポートマップ要素 (<script type="importmap"></script>) を表します。マップのインポートコンポーネントは、ルートコンポーネント <head> コンテンツ (通常は App コンポーネント (Components/App.razor) に配置されます。

<ImportMap />

カスタム ImportMapDefinition が Import Map コンポーネントに割り当てられていない場合、インポートマップはアプリのアセットに基づいて生成されます。

注

ImportMapDefinition インスタンスは作成にコストがかかるため、追加のインスタンスを作成するときにキャッシュすることをお勧めします。

次の例は、カスタムインポートマップ定義とそれによって作成されるインポートマップを示しています。

基本的なインポートマップ:

new ImportMapDefinition(
    new Dictionary<string, string>
    {
        { "jquery", "https://cdn.example.com/jquery.js" },
    },
    null,
    null);

上のコードにより、次のインポートマップが生成されます。

{
  "imports": {
    "jquery": "https://cdn.example.com/jquery.js"
  }
}

スコープ指定ありのインポートマップ:

new ImportMapDefinition(
    null,
    new Dictionary<string, IReadOnlyDictionary<string, string>>
    {
        ["/scoped/"] = new Dictionary<string, string>
        {
            { "jquery", "https://cdn.example.com/jquery.js" },
        }
    },
    null);

上のコードにより、次のインポートマップが生成されます。

{
  "scopes": {
    "/scoped/": {
      "jquery": "https://cdn.example.com/jquery.js"
    }
  }
}

整合性を備えたインポートマップ:

new ImportMapDefinition(
    new Dictionary<string, string>
    {
        { "jquery", "https://cdn.example.com/jquery.js" },
    },
    null,
    new Dictionary<string, string>
    {
        { "https://cdn.example.com/jquery.js", "sha384-abc123" },
    });

上のコードにより、次のインポートマップが生成されます。

{
  "imports": {
    "jquery": "https://cdn.example.com/jquery.js"
  },
  "integrity": {
    "https://cdn.example.com/jquery.js": "sha384-abc123"
  }
}

インポートマップ定義 (ImportMapDefinition) を ImportMapDefinition.Combine と組み合わせます。

静的資産を対応する一意の URL にマップする、ResourceAssetCollection から作成されたインポートマップ:

ImportMapDefinition.FromResourceCollection(
    new ResourceAssetCollection(
    [
        new ResourceAsset(
            "jquery.fingerprint.js",
            [
                new ResourceAssetProperty("integrity", "sha384-abc123"),
                new ResourceAssetProperty("label", "jquery.js"),
            ])
    ]));

上のコードにより、次のインポートマップが生成されます。

{
  "imports": {
    "./jquery.js": "./jquery.fingerprint.js"
  },
  "integrity": {
    "jquery.fingerprint.js": "sha384-abc123"
  }
}

インポートマップのコンテンツセキュリティポリシー (CSP) 違反

このセクションは、Blazor Web Appを呼び出すMapRazorComponentsに適用されます。

ImportMap コンポーネントはインライン <script> タグとしてレンダリングされます。これは、またはdefault-src ディレクティブを設定する厳密なscript-src に違反します。

サブリソース整合性 (SRI) または暗号化 nonce でポリシー違反に対処する方法の例については、サブリソース整合性 (SRI) または nonce を使用した CSP 違反の解決を参照してください。

静的ファイルミドルウェアを構成し、アプリの要求処理パイプラインで UseStaticFiles を呼び出して、静的資産をクライアントに提供します。詳細については、「ASP.NET Core の静的ファイル」をご覧ください。

.NET 8 より前のリリースでは、 Blazor スクリプトなどの Blazor フレームワークの静的ファイルは、静的ファイルミドルウェアを介して提供されます。 .NET 8 以降では、 Blazor フレームワークの静的ファイルはエンドポイントルーティングを使用してマップされ、静的ファイルミドルウェアは使用されなくなりました。

スタンドアロン Blazor WebAssembly アプリのクライアント側の静的資産に指紋を付ける

ビルド/発行中のスタンドアロン Blazor WebAssembly アプリでは、フレームワークはビルド中に計算された値を使用して index.html のプレースホルダーをオーバーライドし、クライアント側のレンダリングのために静的アセットをフィンガープリントします。フィンガープリントがblazor.webassembly.jsスクリプトファイル名に配置され、他の .NET 資産に対してインポートマップが生成されます。

フィンガープリントを採用するには、スタンドアロン wwwwoot/index.html アプリのBlazor WebAssembly ファイルに次の構成が存在する必要があります。

<head>
    ...
    <script type="importmap"></script>
    ...
</head>

<body>
    ...
    <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
    ...
</body>

</html>

プロジェクトファイル (.csproj) では、 <OverrideHtmlAssetPlaceholders> プロパティは trueに設定されます。

<PropertyGroup>
  <OverrideHtmlAssetPlaceholders>true</OverrideHtmlAssetPlaceholders>
</PropertyGroup>

JavaScript 相互運用機能のインポートを解決する場合、インポートマップは、フィンガープリントされたファイルを解決するブラウザーによって使用されます。

指紋マーカーを使用して index.html 内のすべてのスクリプトは、フレームワークによってフィンガープリントされます。たとえば、アプリの scripts.js フォルダー内の wwwroot/js という名前のスクリプトファイルは、ファイル拡張子 (#[.{fingerprint}]) の前に.jsを追加することでフィンガープリントされます。

<script src="js/scripts#[.{fingerprint}].js"></script>

Blazor Web App におけるクライアント側静的アセットのフィンガープリント

Blazor Web App (対話型自動または対話型 WebAssembly レンダリングモード) のクライアント側レンダリング (CSR) では、静的アセットサーバー側フィンガープリントは、マップ静的アセットルーティングエンドポイント規則 (MapStaticAssets)、ImportMap コンポーネント、およびComponentBase.Assets プロパティ (@Assets["..."]) を採用することで有効になります。詳細については、「 ASP.NET Core での静的ファイルのマップ」を参照してください。

CSR 用の追加の JavaScript モジュールをフィンガープリントするには、アプリのプロジェクトファイル (<StaticWebAssetFingerprintPattern>) の.csproj項目を使用します。次の例では、アプリ内のすべての開発者が指定した .mjs ファイルに指紋が追加されます。

<ItemGroup>
  <StaticWebAssetFingerprintPattern Include="JSModule" Pattern="*.mjs" 
    Expression="#[.{fingerprint}]!" />
</ItemGroup>

静的ファイル `<link>href` 形式の概要

このセクションは、すべての .NET リリースと Blazor アプリに適用されます。

次の表は、静的ファイルの <link>href の形式を .NET リリースごとにまとめたものです。

静的ファイルリンクが配置される <head> コンテンツの場所については、「ASP.NET Core Blazor プロジェクトの構造」を参照してください。静的資産リンクは、個々の <HeadContent> コンポーネントのを使用して指定することもできます。

静的ファイルリンクが配置される <head> コンテンツの場所については、「ASP.NET Core Blazor プロジェクトの構造」を参照してください。

.NET 9 以降

アプリの種類	`href` 価値	例一覧
Blazor Web App	`@Assets["{PATH}"]`	`<link rel="stylesheet" href="@Assets["app.css"]" />` `<link href="@Assets["_content/ComponentLib/styles.css"]" rel="stylesheet" />`
Blazor Server†	`@Assets["{PATH}"]`	`<link href="@Assets["css/site.css"]" rel="stylesheet" />` `<link href="@Assets["_content/ComponentLib/styles.css"]" rel="stylesheet" />`
スタンドアロン Blazor WebAssembly	`{PATH}`	`<link rel="stylesheet" href="css/app.css" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`

.NET 8.x

アプリの種類	`href` 価値	例一覧
Blazor Web App	`{PATH}`	`<link rel="stylesheet" href="app.css" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
Blazor Server†	`{PATH}`	`<link href="css/site.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
スタンドアロン Blazor WebAssembly	`{PATH}`	`<link rel="stylesheet" href="css/app.css" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`

.NET 7.x 以前

アプリの種類	`href` 価値	例一覧
Blazor Server†	`{PATH}`	`<link href="css/site.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
ホストされた Blazor WebAssembly‡	`{PATH}`	`<link href="css/app.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`
Blazor WebAssembly	`{PATH}`	`<link href="css/app.css" rel="stylesheet" />` `<link href="_content/ComponentLib/styles.css" rel="stylesheet" />`

† Blazor Server は .NET 8 以降でサポートされていますが、.NET 7 より後のバージョンではプロジェクトテンプレートではなくなりました。
‡ .NET 8 以降を採用する場合は、ホステッド Blazor WebAssembly アプリを Blazor Web App に更新することをお勧めします。

静的 Web アセットプロジェクトモード

このセクションは、.Client の Blazor Web App プロジェクトに適用されます。

<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode> の .Client プロジェクトで必要な Blazor Web App 設定は、Blazor WebAssembly 静的アセットの動作を既定値に戻して、プロジェクトがホストされているプロジェクトの一部として動作するようにします。 Blazor WebAssembly SDK (Microsoft.NET.Sdk.BlazorWebAssembly) は、ライブラリからの出力を単に消費するサーバーと "スタンドアロン" モードで連携するように、特定の方法で静的 Web アセットを構成します。これは Blazor Web App には適していません。ここでは、アプリの WebAssembly 部分がホストの論理部分であり、もっとライブラリのように動作する必要があります。たとえば、プロジェクトは styles バンドル (たとえば、BlazorSample.Client.styles.css) を公開せず、代わりにホストに project バンドルのみを提供するため、ホストは独自の styles バンドルに組み込むことができます。

Default の値 (<StaticWebAssetProjectMode>) を変更したり、.Client プロジェクトからプロパティを削除したりすることはサポートされていません。

非 `Development` 環境の静的ファイル

このセクションは、サーバー側の静的ファイルに適用されます。

アプリをローカルで実行する場合、静的 Web アセットは Development 環境でのみ有効になります。ローカル開発およびテスト中 (たとえば、Development) の Staging 以外の環境で静的ファイルを有効にするには UseStaticWebAssets ファイルの WebApplicationBuilder 上の Program を呼び出します。

警告

運用環境で呼び出された場合は、ディスク上の "プロジェクト以外の別の場所" からファイルを処理するため、運用環境で機能をアクティブ化しないように、UseStaticWebAssets のを呼び出します。このセクションの例では、Staging を呼び出して IsStaging 環境を確認します。

if (builder.Environment.IsStaging())
{
    builder.WebHost.UseStaticWebAssets();
}

Blazor WebAssembly 資産のプレフィックス

このセクションは Blazor Web App に適用されます。

WebAssemblyComponentsEndpointOptions.PathPrefix エンドポイントオプションを使用して、資産のプレフィックスを示すパス文字列 Blazor WebAssembly を設定します。パスは、参照先 Blazor WebAssembly アプリケーションプロジェクトに対応している必要があります。

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "{PATH PREFIX}");

前の例では、{PATH PREFIX} プレースホルダーはパスプレフィックスであり、先頭にスラッシュ (/) を置く必要があります。

次の例では、パスプレフィックスが /path-prefix に設定されています。

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "/path-prefix");

静的なウェブアセットのベースパス

このセクションは、スタンドアロンの Blazor WebAssembly アプリに適用されます。

アプリを公開すると、Blazor フレームワークファイル (_framework フォルダーアセット) を含むアプリの静的アセットが、公開された出力のルートパス (/) に配置されます。プロジェクトファイル (<StaticWebAssetBasePath>) で指定された .csproj によって、ベースパスが非ルートパスに設定されます。

<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>

前の例では、{PATH} プレースホルダーがパスです。

<StaticWebAssetBasePath> プロパティを設定しない場合、スタンドアロンのアプリは /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/ で発行されます。

前の例では、 {TFM} プレースホルダーはターゲットフレームワークモニカー (TFM) です。

スタンドアロンの <StaticWebAssetBasePath> アプリの Blazor WebAssembly プロパティで、発行された静的資産パスが app1 に設定されている場合、発行された出力のアプリへのルートパスは /app1 です。

スタンドアロンの Blazor WebAssembly アプリのプロジェクトファイル (.csproj) で、次のようにします。

<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>

発行された出力では、スタンドアロンの Blazor WebAssembly アプリへのパスは /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/ です。

前の例では、 {TFM} プレースホルダーはターゲットフレームワークモニカー (TFM) です。

このセクションは、スタンドアロンの Blazor WebAssembly アプリとホストされている Blazor WebAssembly ソリューションに適用されます。

<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>

前の例では、{PATH} プレースホルダーがパスです。

<StaticWebAssetBasePath> プロパティを設定しない場合、ホストされているソリューションのクライアントアプリまたはスタンドアロンアプリは、次のパスで発行されます。

ホストされている Server ソリューションの Blazor WebAssembly プロジェクトの場合: /BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/
スタンドアロン Blazor WebAssembly アプリの場合: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/

ホストされている <StaticWebAssetBasePath> アプリの Client プロジェクトまたはスタンドアロンの Blazor WebAssembly アプリの Blazor WebAssembly プロパティで、発行された静的資産パスが app1 に設定されている場合、発行された出力のアプリへのルートパスは /app1 です。

Client アプリのプロジェクトファイル (.csproj) またはスタンドアロンの Blazor WebAssembly アプリのプロジェクトファイル (.csproj) の場合:

<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>

発行された出力で:

ホストされている Server ソリューションの Blazor WebAssembly プロジェクトでのクライアントアプリへのパス: /BlazorHostedSample/Server/bin/Release/{TFM}/publish/wwwroot/app1/
スタンドアロン Blazor WebAssembly アプリへのパス: /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/

<StaticWebAssetBasePath> プロパティは、1 つのホストされた展開で複数の Blazor WebAssembly アプリの発行済み静的資産へのパスを制御するために最も一般的に使用されます。詳細については、「複数のホストされた ASP.NET Core Blazor WebAssembly アプリ」を参照してください。プロパティは、スタンドアロンの Blazor WebAssembly アプリでも有効です。

前の例では、 {TFM} プレースホルダーはターゲットフレームワークモニカー (TFM) です。

ファイルマッピングと静的ファイルのオプション

このセクションは、サーバー側の静的ファイルに適用されます。

FileExtensionContentTypeProvider を使用して追加のファイルマッピングを作成するか、他の StaticFileOptions を構成するには、次の方法のうち 1 つを使用します。次の例では、{EXTENSION} プレースホルダーはファイル拡張子、{CONTENT TYPE} プレースホルダーはコンテンツタイプです。次の API の名前空間は Microsoft.AspNetCore.StaticFiles です。

を使用して Program でStaticFileOptions を使ってオプションを構成します:

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

builder.Services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider = provider;
});

app.UseStaticFiles();

StaticFileOptions を UseStaticFiles ファイル内の Program に直接渡します。

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });

を使用して Program でStaticFileOptions を使ってオプションを構成します:
```
using Microsoft.AspNetCore.StaticFiles;

...

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

builder.Services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider = provider;
});
```
この方法では、Blazor スクリプトの処理に使用されるのと同じファイルプロバイダーが構成されます。カスタム構成が Blazor スクリプトの提供を妨げないことを確認します。たとえば、provider.Mappings.Remove(".js") でプロバイダーを構成することによって、JavaScript ファイルのマッピングを削除しないでください。
UseStaticFiles ファイル内で次の 2 つの Program の呼び出しを使用します:
- StaticFileOptions を使用した最初の呼び出しでカスタムファイルプロバイダーを構成します。
- 2 番目のミドルウェアは、Blazor フレームワークが提供するデフォルトの静的ファイル構成を使用する Blazor スクリプトを提供します。
```
using Microsoft.AspNetCore.StaticFiles;

...

var provider = new FileExtensionContentTypeProvider();
provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";

app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
app.UseStaticFiles();
```
_framework/blazor.server.js を使用してカスタムの静的ファイルミドルウェアを実行することで、MapWhen の提供の妨げにならないようにすることができます。
```
app.MapWhen(ctx => !ctx.Request.Path
    .StartsWithSegments("/_framework/blazor.server.js"),
        subApp => subApp.UseStaticFiles(new StaticFileOptions() { ... }));
```

複数の場所からファイルを提供する

このセクションのガイダンスが適用されるのは Blazor Web App に対してだけです。

CompositeFileProvider を使用して複数の場所からファイルを提供するには:

Microsoft.Extensions.FileProviders の名前空間をサーバープロジェクトの Program ファイルの先頭に追加します。
サーバープロジェクトの Program ファイルで、を呼び出す、以下を実行します。
- 静的アセットへのパスを使用して PhysicalFileProvider を作成します。
- CompositeFileProvider と WebRootFileProvider から PhysicalFileProvider を作成します。複合ファイルプロバイダーをアプリの WebRootFileProvider　に割り当てます。

例:

サーバープロジェクト内に AdditionalStaticAssets という名前の新しいフォルダーを作成します。画像をフォルダーに配置します。

サーバープロジェクトの using ファイルの先頭に、次の Program ステートメントを追加します。

using Microsoft.Extensions.FileProviders;

サーバープロジェクトの Program ファイルで、の呼び出し、次のコードを追加してください。

var secondaryProvider = new PhysicalFileProvider(
    Path.Combine(builder.Environment.ContentRootPath, "AdditionalStaticAssets"));
app.Environment.WebRootFileProvider = new CompositeFileProvider(
    app.Environment.WebRootFileProvider, secondaryProvider);

アプリの Home コンポーネント (Home.razor) マークアップで、以下のように <img> タグを使用して画像を参照します。

<img src="{IMAGE FILE NAME}" alt="{ALT TEXT}" />

前の例の場合:

{IMAGE FILE NAME} プレースホルダーは画像のファイル名です。画像ファイルが AdditionalStaticAssets フォルダーのルートにある場合は、パスセグメントを指定する必要はありません。
{ALT TEXT} プレースホルダーは、画像の代替テキストです。

アプリを実行します。

次の方法で共有

ASP.NET Core Blazor の静的ファイル

プリロードされた Blazor フレームワークの静的アセット

サーバー側の Blazor アプリでの静的資産の配信

マップ静的資産ルーティング エンドポイント規則を使用して資産を配信する

ImportMap コンポーネント

インポートマップのコンテンツ セキュリティ ポリシー (CSP) 違反

スタンドアロン Blazor WebAssembly アプリのクライアント側の静的資産に指紋を付ける

Blazor Web App におけるクライアント側静的アセットのフィンガープリント

静的ファイル <link>href 形式の概要

.NET 9 以降

.NET 8.x

.NET 7.x 以前

静的 Web アセット プロジェクト モード

非 Development 環境の静的ファイル

Blazor WebAssembly 資産のプレフィックス

静的なウェブアセットのベースパス

ファイル マッピングと静的ファイルのオプション

複数の場所からファイルを提供する

その他のリソース

その他のリソース

マップ静的資産ルーティングエンドポイント規則を使用して資産を配信する

`ImportMap` コンポーネント

インポートマップのコンテンツセキュリティポリシー (CSP) 違反

静的ファイル `<link>href` 形式の概要

静的 Web アセットプロジェクトモード

非 `Development` 環境の静的ファイル

ファイルマッピングと静的ファイルのオプション