In AngularJS, why can't I specify the image width and height alongside the src?

Question

I'm using AngularJS to display an image. I'd like to specify the height and width as well so the layout of hte page doesn't shift after the image is loaded. But even when I specify the height and width, the page still shifts, as if the image dimensions are not being updated. What am I doing wrong?

<img class="photo" data-ng-src="{{ media_list.url }}" height="{{ media_list.height }}" width="{{ media_list.width }}" />

Similarly, when I use inline CSS:

<img class="photo" data-ng-src="{{ media_list.url }}" data-ng-style="height:{{ media_list.height }}px; width:{{ media_list.width }}px;" />

The rendered result is:

<img class="photo" style="height:684px; width:1024;" alt="" data-ng-src="http://server/thumbs/Eryy6aARw-1024-1024.jpg"/?

Answer 1

Images are not meant to be used as building blocks, especially in Angular. The image is in the DOM before Angular is ready. That's where the jump comes from. The width/height values are not parsed the moment you open the page, but when Angular and the appropriate controller are ready. Your code would work if you hard-coded the values, but that's not the solution.

Without seeing your code, it's hard to give a good answer, but try showing the whole part of your view where the image is only after the scope and scope values are ready by using something like ng-show="media_list" on the container element. This is what I mean:

<div id="container" data-ng-show="media_list">
    <!-- other stuff here -->
    <img class="photo" data-ng-src="{{ media_list.url }}" height="{{ media_list.height }}" width="{{ media_list.width }}" />
    <!-- other stuff here -->
</div>

The ng-show directive would cause the whole block to be invisible until the value is truthy (maybe even use ng-cloak instead). You need to figure out where to use this (obviously, using it on the image itself, would cause the jump) - what elements would it make sense to group together and show after the scope is ready.