-
Alternate Image
On the following example, the second Image shows an alternate image because it was not able to load the image defined on ImageUrl property (line 29)
Code:
<!DOCTYPE html>
<html>
<head runat="server">
<script type="text/javascript">
Ext.net.Image.override({
afterRender: function () {
var me = this, alternateImageUrl = me.alternateImageUrl;
if (alternateImageUrl) {
me.imgEl.on("error", function () {
if ((me.imageUrl || me.src) != alternateImageUrl) {
me.setImageUrl(alternateImageUrl);
}
}, me);
}
me.callParent(arguments);
}
});
</script>
</head>
<body style="background-color: lightgray;">
<ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
<%--Shows the image--%>
<ext:Image ImageUrl="http://speed.ext.net/identity/extnet-50x50-cog.png" Width="50" Height="50" runat="server">
<CustomConfig>
<ext:ConfigItem Name="alternateImageUrl" Value="http://speed.ext.net/identity/extnet-50x50-cog-white.png" />
</CustomConfig>
</ext:Image>
<%--shows the alternate image--%>
<ext:Image ID="_img" ImageUrl="http://speed.ext.net/identity/INVALID.png" Width="50" Height="50" runat="server">
<CustomConfig>
<ext:ConfigItem Name="alternateImageUrl" Value="http://speed.ext.net/identity/extnet-50x50-cog-white.png" />
</CustomConfig>
</ext:Image>
</body>
</html>
