私は Blazor を初めて使用するので、これは明らかかもしれませんが、理解できません。 WebAssembly プロジェクトと、いくつかのコンポーネントを含む別の Razor クラス ライブラリがあります。画像を入れたいコンポーネントがあります。ライブラリの wwwroot/img フォルダーに画像を配置し、以下のようにアクセスします。
<img src="/img/logo.png" alt="test logo" />
しかし、表示されません - 試してみました
<img src="_content/img/logo.png" alt="test logo" />
しかし、それも表示されません。
画像を表示できる唯一の方法は、画像をクライアント プロジェクトの wwwroot/img フォルダーに置くことです。ただし、コンポーネント ライブラリを他のプロジェクトでも使用できるようにしたいと考えています。
ご指導をよろしくお願いいたします。私は Windows フォームのバックグラウンドを持っているので、学ぶことがたくさんあります :)
@AnnR さん、これに対する答えはわかりましたか?それとも何らかの方法で解決しましたか？私もあなたと同じ船に乗っています
– SU7
2022 年 3 月 14 日 13:48
こんにちは、Blazor を放棄しました。学習曲線が多すぎて、申し訳ありませんが、答えがありません :(
– アンR
2022 年 3 月 15 日 15:54
それは悲しい男です @AnnR!それはかなり素晴らしいですが。現在 Blazor に取り組んで約 2 年になります。ところで、私は答えを見つけました。 CSS 変数を使用して実行する
– SU7
2022 年 3 月 16 日 6:27
------------------------
私も Web 開発は初心者ですが、wwwroot フォルダーは、Web ページで使用する静的ファイルのフォルダーとして機能します (私が理解しているところによると、これは、セキュリティ上の理由からブラウザがメディア ファイルにアクセスできる唯一のフォルダーでもあります)。
数日前にも同じ問題が発生し、すべてを wwwroot フォルダーに入れることで解決しましたが、別の方法が提案されている記事も見つかりました。
http://blog.vivensas.com/static-image-in-blazor-inside-and-outside-web-root/
基本的には、Startup.cs ファイルにメソッドを作成して、他の場所から画像を取得できるようにすることをお勧めします。
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseStaticFiles();
app.UseStaticFiles( new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path. Combine(Directory . GetCurrentDirectory(), “StaticFilesFolder” )),
RequestPath = “/StaticFiles”
});
}
次に、画像を次のように使用できます。
@page “/”
<h3> Display Image in Blazor</h3>
<div>
<img src=”/StaticFiles/Image/OutsideWebRoot.png” />
</div>
@code {
}
編集: おそらく質問を誤解しました。これが機能するには、クライアント プロジェクトにも存在する必要があります。クライアント プロジェクト以外のソリューションから画像を取得する方法がわかりません。
1
ありがとうございます。静的ファイルも試しましたが、動作しませんでした。何が起こっているのかを理解するには、もう少し研究する必要があります。
– アンR
2020 年 9 月 9 日 8:08
------------------------
2 年後、念のため...少なくとも .Net 5、6...
問題を解決するには、イメージ タグのソースを _content/YourRazorClassLibraryName/img/logo.png に設定する必要があります
例:
<img src="_content/YourRazorClassLibraryName/img/logo.png" />
重要
例のように HTML から画像を参照しない場合、画像は _content/YourRazo にダウンロードされません。rクラスライブラリ名/img.したがって、アプリ内の少なくとも 1 つの HTML 要素で画像を使用する必要があります。使用しない場合、画像はダウンロードされません。 CSS で要素の背景画像を設定すると、その画像もダウンロードされます。
これは次の方法で検査できます。
アプリを実行する
chrome\edge で F12 を押して開発者ツールを起動します
「ソース」タブに移動します
[サイト URL]/_content/[YourRazorClassLibrary] を展開します
imgフォルダが存在するか、HTML内で参照されていない画像が存在するかを確認してください。
1
とても役に立ちました、ありがとう！
– osiki96
2023 年 11 月 29 日 14:50
------------------------
この問題は、Blazor Server アプリケーション (.NET 6) でも発生しました。 blazor アプリケーションで RCL を使用していましたが、RCL の /wwwroot/images に静的アセットを保存し、同じ RCL のコンポーネントでそれらを使用しようとしました (アイコンを表示するため)。 Blazor アプリ。
この問題を回避するために私がちょっとした工夫をした方法を次に示します。
すべての静的アセットを (RCL ではなく) Blazor アプリに保存しました
Blazor アプリのスタイルシート (site.css またはその他) で、次のようなこれらのアセットの CSS 変数を作成しました。
--logo: url(/images/logo/logo-light.png);
そして、私の RCL では、それらを次のように使用しました。クラスセレクターを作成し、次のように作成された CSS 変数にコンテンツを適用します。
.icon:before {
content: var(--logo)
}
魔法のようにうまくいきました。
2022 年 3 月 16 日 6:40 に回答
SU7
SU7
1,646
2
金バッジ 2 個
18 個
銀バッジ 18 個
27 個
銅バッジ 27 個
