Menu
I want to make a <p> appear if an image is missing from the image source. So if there is an image show the image if there is no image show the stuff in the <p> tag.
<div id="logo">
<img src="{{selected_.image}}">
<div ng-if="selected_.image == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
</div>
207
asked Nov 19 '25 08:11
Directive to handle images
var app = angular.module("app", []);
app.directive("imageLoading", function ($rootScope, $timeout) {
return {
restrict: "A",
scope: {
imageLoading: "="
},
link: function (scope, element) {
element.on("error", function () {
element.hide();
scope.$apply(function(){
scope.imageLoading = true;
})
});
}
};
});<html ng-app="app">
<head>
</head>
<body>
<h4>image 1</h4>
<img image-loading="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92d.png">
<div ng-show="google">google image not found</div>
<hr>
<h4>image 2</h4>
<img image-loading="google2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div ng-show="google2">google image not found</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>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
