angularjs - プロパティが未定義の場合にダミー画像を表示

Question

ユーザー情報を表示する小さなウィジェットがあります

<div id="this-is-me">
    <p class="userpic"><img src="/gfx/gui/{{ user.avatar }}" alt="{{ user.first_name + ' ' + user.last_name }}" width="75" height="75"></p>
    <h6>{{ user.first_name + ' ' + user.last_name }}</h6>
    <ul class="options white right inline">
        <li><a href="#/profile">Profiel bekijken</a></li>
    </ul>
</div>

ご覧のとおり、アバターはレンダリングされていますが、user.avatar が空の場合、これによりリンクが壊れ、ページで 404 エラーがユーザーに表示されます。

私は中括弧内にいくつかのデフォルトロジックを追加しようとしました{{ user.avatar || 'missing-user.png' }}

これをAngularで修正する適切な方法はありますか? ng-switch は使用できません。html が削除され、このウィジェットはログインの前後にページに表示されます。したがって、ユーザーがログインすると、このウィジェットは再レンダリングされ、引き続きアバターが表示されるはずです... ng-switch では、html が削除され、再レンダリングされないため、これは不可能だと思います。