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.$apply(function(){
                   scope.img.dimensions = {
                     height: 0.5*element[0].naturalHeight+"px",
                     width: 0.5*element[0].naturalWidth+"px"
                  }
                });
                
                
                console.log(scope.img.dimensions) // now it has dimensions property!
            });
        }
    }
});