让我们来看看“标准/错误”示例：

<img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>`

以下是发生的事情：

DOM加载
属性srcset
请求http://www.gravatar.com/avatar/{{hash}}，当然不存在，所以我们得到了404
Angular fire up up
Angular插入DOM元素中的模板字符串
现在我们终于得到了http://www.gravatar.com/avatar/realHash，这就是我们需要的东西

现在让我们来看看正确的例子：

<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>`

以下是发生的事情：

DOM加载
ng-srcset属性，但无法识别，因此不会进行任何服务器调用
Angular fire up up
Angular在DOM元素中插入模板字符串，同时考虑所有ng- *属性
srcset属性是根据ng-srcset的插值创建的，因此我们立即得到类似：<img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x" srcset= "http://www.gravatar.com/avatar/realHash 2x" />的内容，这正是我们想要的。
找到并识别新添加的srcset属性，因此服务器拨打http://www.gravatar.com/avatar/realHash，一切都很好

同样的原则适用于ng-src，ng-href等

这是一篇关于scrset本身的有趣文章：http://www.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/

Answer 2

它说的是绑定可能在srcset中不起作用。

例如，您可能有类似$ scope.test =＆＃34; destination / picture.jpg＆＃34;

如果您使用<img ng-srcset="{{test}}"/>

它将在location destination / picture.jpg中找到图像

就像使用<img srcset="{{test}}"/>

一样

有时它可能会搜索位置＆＃34; {{test}}＆＃34;而不是＆＃34; destination / picture.jpg＆＃34;。情况并非总是如此，因此＆＃34;做错的方式＆＃34;，在某些情况下它可能会起作用，而在其他情况下则可能不起作用。

Answer 3

Srcset： Srcset是html5中添加的新属性。我们可以使用srcset为单个图像定义多个源URL，以便可以根据当前屏幕大小呈现不同分辨率的图像。让我们看一个例子，

<img src="low-res.jpg" srcset="high-res.jpg 2x">

html5兼容浏览器将渲染低res.jpg以获得更小的屏幕尺寸，并将渲染高res.jpg以获得更大的屏幕（2x）。在上面的示例中，使用src属性将确保默认情况下，如果浏览器不支持html5，则可以呈现low-res.jpg。

为了更好地了解srcset属性，您应该尝试阅读以下好文章：
srcset explained

ngSrcset：使用ngSrcset属性确保ng-srcset属性中使用的任何表达式都可以通过angular app解析。

以下无法正常工作，

<img src="low-res.jpg" srcset="{{src}} 2x"> <!-- {{src}} is not expanded by angularjs -->

然后正常工作：

<img src="low-res.jpg" ng-srcset="{{src}} 2x"> <!--works fine -->

ngSrc：类似的推理适用于ng-src属性。 ngSrc属性可以解析用ng-src属性编写的角度表达式，而src属性中使用的表达式不会被angularjs解析。

<img src="{{src}}"> <!--will not work,"{{src}}" will not be parsed by angularjs -->
<img ng-src="{{src}}"> <!--works fine, "{{src}}" will be evaluated by angularjs -->

ngSrc和ngSrcset之间的区别

3 个答案:

让我们来看看“标准/错误”示例：

现在让我们来看看正确的例子：