JSFiddle - React, Tailwind, and code Playground
HTML
<body ng-app="app" class="ng-scope">
<div ng-controller="MainCtrl" class="ng-scope">
<img ng-src="{{ src }}" img-load ng-load="onLoad()">
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
JavaScript
var app = angular.module('app', []);
app.controller('MainCtrl', function ($scope, $timeout) {
$scope.src = "http://lorempixel.com/1920/1080";
$scope.onLoad = function () {
// Timeout allows image to fully render (except when JSFiddle first loads)
$timeout(function() {
alert("Image has loaded!");
});
};
});