JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="imgController">
    <img ng-repeat="img in imgs" ng-src="{{img.url}}" ng-style="{{img.dimensions}}" loadable />
</div>

CSS

img{ display: block; margin: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5);}

JavaScript

var app = angular.module("myApp",[]);

app.controller("imgController",function($scope){
    $scope.imgs = [{url:"http://www.piyut.org.il/Files/RFile/2579.jpg"},
                   {url:"http://www.piyut.org.il/Files/RFile/1565.jpg"},
                   {url:"http://www.piyut.org.il/Files/RFile/1567.jpg"}] 
});

app.directive('loadable', function () {       
    return {
        link: function(scope, element, attrs) {   

            element.bind("load" , function(e){ 
    
                scope.img.dimensions = {
                    height: element[0].naturalHeight,
                    width: element[0].naturalWidth
                }
                console.log(scope.img) // now it has dimensions property!
            });
        }
    }
});