我正在使用AngularJS来显示图像。我也想指定高度和宽度，因此在加载图像后，页面的布局不会移位。但即使我指定了高度和宽度，页面仍会移动，就好像图像尺寸没有更新一样。我做错了什么？
<img class="photo" data-ng-src="{{ media_list.url }}" height="{{ media_list.height }}" width="{{ media_list.width }}" />
同样，当我使用内联CSS时：
<img class="photo" data-ng-src="{{ media_list.url }}" data-ng-style="height:{{ media_list.height }}px; width:{{ media_list.width }}px;" />
渲染结果为：
<img class="photo" style="height:684px; width:1024;" alt="" data-ng-src="http://server/thumbs/Eryy6aARw-1024-1024.jpg"/?
答案 0 :(得分：5)
图像不能用作构建块，尤其是在Angular中。在Angular准备好之前，图像位于DOM中。这就是跳跃的来源。打开页面时，不会解析宽度/高度值，但是当Angular和相应的控制器准备就绪时。如果您对值进行了硬编码，那么您的代码就会起作用，但这不是解决方案。
如果没有看到您的代码，很难给出一个好的答案，但尝试通过使用类似{{1}之类的内容，在范围和范围值准备就绪之后显示视图的整个部分。在容器元素上。这就是我的意思：
ng-show="media_list" <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>
指令会导致整个块不可见，直到值为真（甚至可能使用ng-show）。你需要弄清楚在哪里使用它（显然，在图像本身上使用它会导致跳转） - 组合在一起并在示波器准备就绪后显示哪些元素是有意义的。