28

HTML:

 <img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />

アプリの実行中に、次のエラーが表示されます。

GET http://url.com/myApp/files/album_images/image/ 403 (Forbidden)

「http://url.com/myApp/files/album_images/image/」は {{plugins.filesPath.album_images.image}} の値です。

すべてのデータが到着する前に画像をロードするため、エラーが表示されます..

コンソールでこのエラーを防ぐにはどうすればよいですか?

4

4 に答える 4

32

条件付きパターンを使用してみてくださいcondition && true || false

したがって、次のようng-srcに属性を変更します。

<img ng-src="{{ album && plugins.filesPath.album_images.image + album.cover_image || '' }}" alt="{{album.title}}" />

この変更によりsrc、データが到着するまで属性の内容は空になります。

出典: モデル データに基づいて img src を条件付きで変更

于 2013-07-02T10:34:59.380 に答える
11

2015 年 3 月の更新

Angular 1.3.x を使用すると、ほとんどのカスタム データ チェックが廃止されるはずです。$interpolate には、実際に式を解決する前に、すべてのバインディングが未定義以外になるのを待機するフラグ「allOrNothing」が含まれるようになったためです。

したがって、この場合、属性を一度ng-srcだけ挿入し、準備が整います。それでも、セットアップによってはまだ準備ができていない可能性があるため、それを待ちたい場合は、引き続きこのアプローチを使用できます.srcalbum_images.image album.cover_imagealbum.titleisDataAvailable()

元の回答:

があるのでng-if、試すことができます

<img ng-if="isDataAvailable()" ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}" alt="{{album.title}}" />

$scope.isDataAvailable = function(){
    // do your data checks here and
    // return true;
}

isDataAvailableそうすれば、画像は返されるとすぐに DOM に追加されるtrueだけで、その後ng-srcに起動してファイルを取得しようとします。

それでも、サーバーのディレクトリ/ファイルアクセス制限に多少関連していると確信403 (Forbidden)しています。

于 2013-11-29T14:24:43.737 に答える
6

ng-srcは、その値が変更されるのを待って、要素にsrc値を適用すると思います。変えてみましたか

<img ng-src="{{plugins.filesPath.album_images.image}}{{album.cover_image}}"

に

<img ng-src="{{plugins.filesPath.album_images.image + album.cover_image}}"？

編集-修正された回答

ng-srcは{{}}の情報が変更されるのを待つため、そのすべての側面の準備ができているかどうかを知る方法がありません。私は2つの可能な解決策を考えることができます：

a）url_when_ready()文字列を引数として受け取り、それらを連結して、すべての文字列が定義されている場合にのみ値を返す関数を作成します。その後、

ng-src="{{url_when_ready([plugins.filesPath.album_images.image, album.cover_image])}}

b）$scope.album.cover_imageの準備ができたときに更新されるモデル$scope.album.cover_image_fullを作成し、それをng-src値として使用します

于 2013-03-15T13:52:24.657 に答える