@@ -62,6 +62,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
6262// %2 is used as image width
6363// %3 is used as image height
6464// %4 is injected as code to artImage
65+// %5 is used as image fallback
6566var kArtShapeHolderCode = 'Item { \n\
6667 id: artShapeHolder; \n\
6768 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
@@ -70,7 +71,8 @@ var kArtShapeHolderCode = 'Item { \n\
7071 Loader { \n\
7172 id: artShapeLoader; \n\
7273 objectName: "artShapeLoader"; \n\
73− active: cardData && cardData["art"] || false; \n\
74+ readonly property string cardArt: cardData && cardData["art"] || %5; \n\
75+ active: cardArt != ""; \n\
7476 asynchronous: root.asynchronous; \n\
7577 visible: status == Loader.Ready; \n\
7678 sourceComponent: Item { \n\
@@ -128,7 +130,7 @@ var kArtShapeHolderCode = 'Item { \n\
128130 CroppedImageMinimumSourceSize { \n\
129131 id: artImage; \n\
130132 objectName: "artImage"; \n\
131− source: cardData && cardData["art"] || ""; \n\
133+ source: artShapeLoader.cardArt; \n\
132134 asynchronous: root.asynchronous; \n\
133135 width: %2; \n\
134136 height: %3; \n\
@@ -245,11 +247,12 @@ var kMascotShapeLoaderCode = 'Loader { \n\
245247// %1 is used as anchors of mascotImage
246248// %2 is used as visible of mascotImage
247249// %3 is injected as code to mascotImage
250+// %4 is used as fallback image
248251var kMascotImageCode = 'CroppedImageMinimumSourceSize { \n\
249252 id: mascotImage; \n\
250253 objectName: "mascotImage"; \n\
251254 anchors { %1 } \n\
252− source: cardData && cardData["mascot"] || ""; \n\
255+ source: cardData && cardData["mascot"] || %4; \n\
253256 width: units.gu(6); \n\
254257 height: units.gu(5.625); \n\
255258 horizontalAlignment: Image.AlignHCenter; \n\
@@ -482,11 +485,15 @@ function cardString(template, components) {
482485
483486 var fallback = components["art"] && components["art"]["fallback"] || "";
484487 fallback = encodeURI(fallback);
485− var fallbackCode = "";
488+ var fallbackStatusCode = "";
489+ var fallbackURICode = '""';
486490 if (fallback !== "") {
487− fallbackCode += 'onStatusChanged: if (status === Image.Error) source = decodeURI("%1");'.arg(fallback);
491+ // fallbackStatusCode has %5 in it because we want to substitute it for fallbackURICode
492+ // which in kArtShapeHolderCode is %5
493+ fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %5;';
494+ fallbackURICode = 'decodeURI("%1")'.arg(fallback);
488495 }
489− code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(fallbackCode);
496+ code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(fallbackStatusCode).arg(fallbackURICode);
490497 } else {
491498 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
492499 }
@@ -580,11 +587,15 @@ function cardString(template, components) {
580587 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
581588 var fallback = components["mascot"] && components["mascot"]["fallback"] || "";
582589 fallback = encodeURI(fallback);
583− var fallbackCode = "";
590+ var fallbackStatusCode = "";
591+ var fallbackURICode = '""';
584592 if (fallback !== "") {
585− fallbackCode += 'onStatusChanged: if (status === Image.Error) source = decodeURI("%1");'.arg(fallback);
593+ // fallbackStatusCode has %4 in it because we want to substitute it for fallbackURICode
594+ // which in kMascotImageCode is %4
595+ fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %4;';
596+ fallbackURICode = 'decodeURI("%1")'.arg(fallback);
586597 }
587− mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackCode);
598+ mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackStatusCode).arg(fallbackURICode);
588599 }
589600
590601 var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white")';