Posted over 6 years ago. Visible to the public.

Resolving Angular not updating an image src when ng-src is empty

The Angular ngSrc directive serves to properly set an image src via Angular. As anything in Angular, it updates the image as soon as the contained Angular expression changes. However, when the ng-src attribute is empty, Angular will not empty the src attribute. To overcome this, use the trick below.

Copy
<img ng-src="{{ element.image || '//:0' }}" />

Background

The ngSrc directive explicitly returns when the attribute value is falsy. As a workaround, set a "blank" image src when the image is empty. As somebody on Stackoverflow writes, //:0 serves this purpose: It adopts the current protocol, omits the hostname and sets the port to zero, which is invalid and should be killed by the network layer.

As a result, Angular should now correctly empty the src attribute when ng-src empties.

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for old versions of Ruby on Rails (3.2 and 2.3).

Owner of this card:

Avatar
Dominik Schöler
Last edit:
over 6 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more