Menu
I have an image element that is getting its path from an attribute I have on my angular object. However if this (imagePath) is empty I get a broken image. I would like to not render the image if the attribute is empty however I do not see a way to do this. Any ideas?
<img width="50px" src="/resources/img/products/{{current.manufacturerImage.imagePath}}">
304
We will use *ngIf to display and hide our div based on the condition. As you can see in the above example, we have set a condition if the element is true , the div will be displayed, and if the condition is false , it will not display. So, the div will be hidden because we have set the element as false .
AngularJS ng-hide Directive The ng-hide directive hides the HTML element if the expression evaluates to true. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none .
The AngularJS ng-hide directive is used to hide the HTML element if the expression is set to true. The element is shown if you remove the ng-hide CSS class and hidden, if you add the ng-hide CSS class onto the element. The ng-hide CSS class is predefined in AngularJS and sets the element's display to none.
You want to check out ngHide directive.
So your code would look something like.
<img width="50px" ng-hide="current.manufacturerImage.imagePath == ''"
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">
Alternatively, you could also try the suggestion by darkporter
<img width="50px" ng-show="current.manufacturerImage.imagePath"
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">
You could also update this to check if the object is null or undefined then hide the element.
172
Alternatively ngIf directive can be used as below:
<img width="50px" *ngIf="current.manufacturerImage.imagePath !== ''"
src="/resources/img/products/{{current.manufacturerImage.imagePath}}">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
