[解決済み] AngularJSによる画像取得リクエスト
2022-12-10 17:34:31
質問
HTMLに表示する画像のソース文字列をAngularJSのコントローラに保存していますが、Angularコントローラが初期化される前に404が出力されます。
以下がそのHTMLです。
<div ng-controller="Cont">
<img src="{{imageSource}}">
</div>
Angularのコントローラです。
var Cont = function($scope) {
$scope.imageSource = '/tests.png';
}
そして、表示されるエラー(
%7D%7D
に対応する
{{
に対応します)。
GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found)
どうすればこれを防ぐことができるでしょうか?つまり、Angularコントローラが初期化されたときだけ画像を読み込むようにすればよいのでしょうか?
どのように解決するのですか?
srcをng-srcに置き換えてみてください。 ドキュメントを参照してください。 :
src属性で{{hash}}のようなAngularのマークアップを使うとうまくいかない のようになります。ブラウザはURLからリテラルテキストでフェッチします。 {ブラウザは、Angularが{{hash}}内の式を置き換えるまで、リテラルテキストでURLから取得します。この問題を解決するために ngSrcディレクティブがこの問題を解決してくれます。
<div ng-controller="Cont">
<img ng-src="{{imageSource}}">
</div>
関連
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] JavaScriptでクエリ文字列の値を取得するにはどうすればよいですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?