@@ -61,9 +61,10 @@ var kBackgroundLoaderCode = 'Loader {\n\
6161// %1 is used as anchors of artShapeHolder
6262// %2 is used as image width
6363// %3 is used as image height
64−// %4 is used as aspect ratio fallback
65−// %5 is used for artShapeSource.hideSource and inner Loader visible
64+// %4 is used for artShapeSource.hideSource and inner Loader visible
65+// %5 is used as aspect ratio fallback
6666// %6 is injected as code to artImage
67+// %7 is used as image fallback
6768var kArtShapeHolderCode = 'Item { \n\
6869 id: artShapeHolder; \n\
6970 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
@@ -72,7 +73,8 @@ var kArtShapeHolderCode = 'Item { \n\
7273 Loader { \n\
7374 id: artShapeLoader; \n\
7475 objectName: "artShapeLoader"; \n\
75− active: cardData && cardData["art"] || false; \n\
76+ readonly property string cardArt: cardData && cardData["art"] || %7; \n\
77+ active: cardArt != ""; \n\
7678 asynchronous: root.asynchronous; \n\
7779 visible: status == Loader.Ready; \n\
7880 sourceComponent: Item { \n\
@@ -86,11 +88,11 @@ var kArtShapeHolderCode = 'Item { \n\
8688 anchors.centerIn: parent; \n\
8789 width: 1; \n\
8890 height: 1; \n\
89− hideSource: %5; \n\
91+ hideSource: %4; \n\
9092 } \n\
9193 Loader { \n\
9294 anchors.fill: parent; \n\
93− visible: %5; \n\
95+ visible: %4; \n\
9496 sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent; \n\
9597 Component { \n\
9698 id: artShapeShapeComponent; \n\
@@ -114,7 +116,7 @@ var kArtShapeHolderCode = 'Item { \n\
114116 } \n\
115117 } \n\
116118 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
117− readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : %4; \n\
119+ readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : %5; \n\
118120 Component.onCompleted: { updateWidthHeightBindings(); } \n\
119121 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\
120122 function updateWidthHeightBindings() { \n\
@@ -129,7 +131,7 @@ var kArtShapeHolderCode = 'Item { \n\
129131 CroppedImageMinimumSourceSize { \n\
130132 id: artImage; \n\
131133 objectName: "artImage"; \n\
132− source: cardData && cardData["art"] || ""; \n\
134+ source: artShapeLoader.cardArt; \n\
133135 asynchronous: root.asynchronous; \n\
134136 width: %2; \n\
135137 height: %3; \n\
@@ -246,11 +248,12 @@ var kMascotShapeLoaderCode = 'Loader { \n\
246248// %1 is used as anchors of mascotImage
247249// %2 is used as visible of mascotImage
248250// %3 is injected as code to mascotImage
251+// %4 is used as fallback image
249252var kMascotImageCode = 'CroppedImageMinimumSourceSize { \n\
250253 id: mascotImage; \n\
251254 objectName: "mascotImage"; \n\
252255 anchors { %1 } \n\
253− source: cardData && cardData["mascot"] || ""; \n\
256+ source: cardData && cardData["mascot"] || %4; \n\
254257 width: units.gu(6); \n\
255258 height: units.gu(5.625); \n\
256259 horizontalAlignment: Image.AlignHCenter; \n\
@@ -487,11 +490,15 @@ function cardString(template, components) {
487490 }
488491 var fallback = components["art"] && components["art"]["fallback"] || "";
489492 fallback = encodeURI(fallback);
490− var fallbackCode = "";
493+ var fallbackStatusCode = "";
494+ var fallbackURICode = '""';
491495 if (fallback !== "") {
492− fallbackCode += 'onStatusChanged: if (status === Image.Error) source = decodeURI("%1");'.arg(fallback);
496+ // fallbackStatusCode has %6 in it because we want to substitute it for fallbackURICode
497+ // which in kArtShapeHolderCode is %7
498+ fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %7;';
499+ fallbackURICode = 'decodeURI("%1")'.arg(fallback);
493500 }
494− code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(aspectRatio).arg(isConciergeMode ? "false" : "true").arg(fallbackCode);
501+ code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(isConciergeMode ? "false" : "true").arg(aspectRatio).arg(fallbackStatusCode).arg(fallbackURICode);
495502 } else {
496503 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
497504 }
@@ -585,11 +592,15 @@ function cardString(template, components) {
585592 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
586593 var fallback = components["mascot"] && components["mascot"]["fallback"] || "";
587594 fallback = encodeURI(fallback);
588− var fallbackCode = "";
595+ var fallbackStatusCode = "";
596+ var fallbackURICode = '""';
589597 if (fallback !== "") {
590− fallbackCode += 'onStatusChanged: if (status === Image.Error) source = decodeURI("%1");'.arg(fallback);
598+ // fallbackStatusCode has %4 in it because we want to substitute it for fallbackURICode
599+ // which in kMascotImageCode is %4
600+ fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %4;';
601+ fallbackURICode = 'decodeURI("%1")'.arg(fallback);
591602 }
592− mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackCode);
603+ mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible).arg(fallbackStatusCode).arg(fallbackURICode);
593604 }
594605
595606 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")';