web-dev-qa-db-ja.com

Angular JS ng-srcを使用したフォールバック（デフォルト）画像

モーダルから返されたデータを使用して画像ソースを設定しようとしています。これはng-repeatループ内にあります：

<div id="divNetworkGrid">
    <div id="{{network.id}}" ng-repeat="network in networks">
        <span>
            <table>
                <tr>
                    <td class="imgContainer">
                        <img ng-src="{{ ('assets/img/networkicons/'+ network.actual + '.png') || 
                                         'assets/img/networkicons/default.png' }}"/>
                    </td>
                </tr>
            </table>
        </span>
    </div>
</div>

明らかなように、network.actualモデルプロパティがnullとして返されたときにdefault.pngを入力します。しかし、私のコードはデフォルトの画像を取得していませんが、最初の画像が利用可能になると問題なく表示されます。

これは構文の問題だと思いますが、何が悪いのかわかりません。

imageangularjssrcfallback
14
nikjohn

ng-srcを使用する興味深い方法。その式がどのように処理されるかはテストしていませんが、より安定した方法で実行することをお勧めします。

<img ng-src="{{ networkIcon }}" />

そしてあなたのコントローラーで：

$scope.networkIcon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png';

編集：明確にするために、これを行う最善の方法は、イメージソースをスコープに直接バインドすることではなく、イメージのフォールバックロジックをビューの外に移動することです。私のアプリケーションでは、データを取得するサービスまたはサーバー自体で画像URLを送信することが多いため、クライアントは単一のプロパティについてのみ心配する必要があります。

リピーターのアドレスを編集：

angular.forEach($scope.networks, function(network) {
  network.icon = network.actual ? 'assets/img/networkicons/' + network.actual + '.png' : 'assets/img/networkicons/default.png';
});

<tr ng-repeat="network in networks">
  <td><img ng-src="{{ network.icon }}" /></td>
</tr>
10
Terry

両方を使用できることがわかりましたng-srcとsrcはimgタグで、もしng-srcは失敗します（使用された変数が存在しないなど）。自動的にsrc属性にフォールバックします。

31
kudlajz

私が想像しているのは、たとえnetwork.actual 無効です。たとえば、最初の値：

('assets/img/networkicons/'+network.actual+'.png')

（ 'assets/img/networkicons /null。png'）のような404 src URLを評価しています。したがって、OR選択では、それは真実ですが、リソースは404です。その場合、onErrorを介してフォールバックを次のように設定できます。

<img ng-src="{{('assets/img/networkicons/'+network.actual+'.png')}}" onerror="this.src='assets/img/networkicons/default.png'" />

ユースケースのデモを行うCodePen- http://codepen.io/jpost-vlocity/pen/zqqerL

19
jpostdesign
angular.module('fallback',[]).directive('fallbackSrc', function () {
    return{
        link: function postLink(scope, element, attrs) {
            element.bind('error', function () {
                angular.element(this).attr("src", attrs.fallbackSrc);
            });
        }
    }
});

<img ng-src="{{url}}" fallback-src="default-image.jpg"/>

angular.module('fallback', []).directive('actualSrc', function () {
    return{
        link: function postLink(scope, element, attrs) {
            attrs.$observe('actualSrc', function(newVal, oldVal){
                 if(newVal != undefined){
                     var img = new Image();
                     img.src = attrs.actualSrc;
                     angular.element(img).bind('load', function () {
                         element.attr("src", attrs.actualSrc);
                     });
                 }
            });

        }
    }
});

<img actual-src="{{url}}" ng-src="default.jpg"/>

リンク

14
Subash Selvaraj
<div id="divNetworkGrid">
                <div id="{{network.id}}" ng-repeat="network in networks">
                    <span>
                        <table>
                            <tr>
                                <td class="imgContainer">
                                    <img ng-src="{{'assets/img/networkicons/'+(network.actual || 'default' )+'.png'}}"/>
                                </td>
                            </tr>
                        </table>
                    </span>
                </div>
            </div>

インラインまたはクエリされた変数が未定義の場合に機能します。上記はあなたの問題を修正します

8
Kochoba

次のようにOR演算子の後に代替画像を指定できます：

{{ book.images.url || 'Images/default.gif' }}
4
Rajnesh Nadan