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

注

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

警告

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

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

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

プリロードされた 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 Web App拡張ナビゲーションでは、.NET 11 以降でリソースを事前に読み込もうとしません。詳細については、「拡張ナビゲーションBlazorリソースをプリロードしなくなった」を参照してください。

サーバー側の 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 相互運用機能のインポートを解決する場合、インポートマップは、フィンガープリントされたファイルを解決するブラウザーによって使用されます。

次の例では、開発者が指定したすべての JS ファイルは、 .js ファイル拡張子を持つモジュールです。

アプリのscripts.js フォルダー内の wwwroot/js という名前のモジュールは、ファイル拡張子 (#[.{fingerprint}]) の前に.jsを追加することによってフィンガープリントされます。

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

アプリのプロジェクトファイル (<StaticWebAssetFingerprintPattern>) で、.csproj プロパティを使用して指紋式を指定します。

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

指紋マーカーを含むJS内の*.js ファイル (index.html) は、アプリの発行時を含め、フレームワークによってフィンガープリントされます。

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` value	例一覧
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` value	例一覧
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` value	例一覧
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 プロジェクトからプロパティを削除したりすることはサポートされていません。

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} プレースホルダーはコンテンツタイプです。

を使用して 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();
```
MapWhenを使用してカスタム静的ファイルミドルウェアを実行することで、_framework/blazor.server.jsの提供を妨げることを回避できます。
```
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;

MapStaticAssetsとUseStaticFilesを呼び出す前に、サーバープロジェクトの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} プレースホルダーは、画像の代替テキストです。

アプリを実行します。

その他のリソース

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-08-24

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

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

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

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

ImportMap コンポーネント

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

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

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

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

.NET 9 以降

.NET 8.x

.NET 7.x 以前

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

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

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

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

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

その他のリソース

フィードバック

その他のリソース

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

`ImportMap` コンポーネント

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

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

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

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