web-dev-qa-db-ja.com

AngularJS ng-src条件が見つからない場合（URL経由）

ローカルに保存した多数の画像を、最新の状態にあるオンラインリソースに移植しています。元々、画像をローカルに保存したときに、画像に次の条件を使用できました。

_<img ng-src="/Content/champions/{{Champions1[champ1-1].cName.trim() || 'None'}}.png"
_

これは、名前に基づいて現在の画像経路を取得し、存在しない場合は、単に_/Content/champions/None.png_の画像パスを返します。

これは、URLを介しても同じように機能すると考えました。そこで、構文を作成しました。

_<img ng-src="http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion/{{Champions1[champ1-1].cName.trim() 
|| 
'/Content/champions/None'}}.png"
_

想定されるのは、上記のURLが404 (Not Found)を返した場合、Noneイメージのデフォルトのローカルストレージに戻るということです。ただし、オンライン画像を表示しようとし、ローカルの「なし」画像を調整するのではなく、「壊れた画像/画像」アイコンを表示します。

どうすれば修正できますか？または、なぜAngular Not Found 404 (Not Found)と言っているときにこのシナリオに正しく応答しないのですか？

ホームディレクトリを再検索するのではなく、条件付き構文をURLに追加しようとすることがありますが、それが問題になる可能性がありますか？つまり、Contentフォルダーから再起動するのではなく、次の結果を返すことがあります。 _http://ddragon.leagueoflegends.com/cdn/4.20.1/img/champion//Content/champions/None.png_

javascriptangularjsimage
12
Austin
{{Champions1[champ1-1].cName || 'None'}}

この構成は、画像がnullまたは未定義の場合にのみ、画像名を'None'に置き換えます。

角度ディレクティブngSrcには、404応答の処理のためのネイティブ機能がありません。

ただし、次のonErrorSrcディレクティブで修正されます。

var myApp = angular.module('myApp',[]);

myApp.directive('onErrorSrc', function() {
    return {
        link: function(scope, element, attrs) {
          element.bind('error', function() {
            if (attrs.src != attrs.onErrorSrc) {
              attrs.$set('src', attrs.onErrorSrc);
            }
          });
        }
    }
});

<img ng-src="wrongUrl.png" on-error-src="http://google.com/favicon.ico"/>

JSFiddle の例を参照してください

43
Artyom Pranovich

他の簡単な解決策は、同じ最終結果を実行する次のコードを使用することです。

<img ng-src="{{ yourImageCurrentScopeVar }}" onerror="this.src='img/default-image-when-occur-a-error.png'"/>
31
João Paulo Cercal

私はこれを使用しました：

            <img ng-src="{{ '/api/whatever/' + id + '/image/' }}"
                onerror="angular.element(this).scope().imgError()"
                onload="angular.element(this).scope().imgLoaded()" />

imgError（）およびimgLoaded（）は、このページのコントローラーの関数です。この手法は、特に目的に適しています。スコープ変数を設定して、読み込まれていないときに画像を完全に非表示にし、画像が見つからないという事実に関する国際化されたテキストメッセージに置き換えます。

7
CreamOfMushroom

Javaスクリプトで関数を呼び出す他の可能性

<img ng-src="{{yourImageCurrentScopeVar}}" onerror="myFunction(this)"/>

<script>
function myFunction(event) {
event.src = "./Static/app/img/by_default_picture.png";
event.onerror = '';
};
</script>
0
GameChanger