Extend image widget to support alternate content if a remote image fails to load

...and use it to add an image for bags/recipes that do not have a $:/favicon.ico

core/modules/widgets/image.js

@@ -43,6 +43,7 @@ ImageWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 ImageWidget.prototype.render = function(parent,nextSibling) {
+	var self = this;
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();
@@ -118,6 +119,14 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	if(this.lazyLoading && tag === "img") {
 		domNode.setAttribute("loading",this.lazyLoading);
 	}
+	// Insert element
+	parent.insertBefore(domNode,nextSibling);
+	this.domNodes.push(domNode);
+	// Render children into a wrapper
+	this.childWrapper = this.document.createElement("span");
+	this.childWrapper.style.display = "none" ;
+	parent.insertBefore(this.childWrapper,nextSibling);
+	this.renderChildren(this.childWrapper,null);
 	// Add classes when the image loads or fails
 	$tw.utils.addClass(domNode,"tc-image-loading");
 	domNode.addEventListener("load",function() {
@@ -127,10 +136,9 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	domNode.addEventListener("error",function() {
 		$tw.utils.removeClass(domNode,"tc-image-loading");
 		$tw.utils.addClass(domNode,"tc-image-error");
+		self.childWrapper.style.display = "inline" ;
+		domNode.style.display = "none";
 	},false);
-	// Insert element
-	parent.insertBefore(domNode,nextSibling);
-	this.domNodes.push(domNode);
 };
 
 /*
@@ -142,10 +150,12 @@ ImageWidget.prototype.execute = function() {
 	this.imageWidth = this.getAttribute("width");
 	this.imageHeight = this.getAttribute("height");
 	this.imageClass = this.getAttribute("class");
-    	this.imageUsemap = this.getAttribute("usemap");
+	this.imageUsemap = this.getAttribute("usemap");
 	this.imageTooltip = this.getAttribute("tooltip");
 	this.imageAlt = this.getAttribute("alt");
 	this.lazyLoading = this.getAttribute("loading");
+	// Make the child widgets
+	this.makeChildWidgets();
 };
 
 /*

plugins/tiddlywiki/multiwikiserver/admin-ui/MultiWikiServer Administration.tid

@@ -51,7 +51,15 @@ title: MultiWikiServer Administration
 \whitespace trim
 <$genesis $type=<<element-tag>> class={{{ mws-bag-pill [<is-topmost>match[yes]then[mws-bag-pill-topmost]] +[join[ ]] }}}>
 	<a class="mws-bag-pill-link" href=`/wiki/${ [{!!bag-name}encodeuricomponent[]] }$/bags/${ [{!!bag-name}encodeuricomponent[]] }$` rel="noopener noreferrer" target="_blank">
-		<$image source=`/wiki/${ [{!!bag-name}encodeuricomponent[]] }$/bags/${ [{!!bag-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico` class="mws-favicon-small"/>
+		<$image
+			source=`/wiki/${ [{!!bag-name}encodeuricomponent[]] }$/bags/${ [{!!bag-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico`
+			class="mws-favicon-small"
+		>
+			<$image
+				source="$:/MultiWikiServer/images/missing-favicon.png"
+				class="mws-favicon-small"
+			/>
+		</$image>
 		<span class="mws-bag-pill-label">
 			<$text text={{!!bag-name}}/>
 		</span>
@@ -64,7 +72,15 @@ title: MultiWikiServer Administration
 \whitespace trim
 <a class="mws-wiki-card" href=`/wiki/${ [{!!recipe-name}encodeuricomponent[]] }$` rel="noopener noreferrer" target="_blank">
 	<div class="mws-wiki-card-image">
-		<$image source=`/wiki/${ [{!!recipe-name}encodeuricomponent[]] }$/recipes/${ [{!!recipe-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico` class="mws-favicon"/>
+		<$image
+			source=`/wiki/${ [{!!recipe-name}encodeuricomponent[]] }$/recipes/${ [{!!recipe-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico`
+			class="mws-favicon"
+		>
+			<$image
+				source="$:/MultiWikiServer/images/missing-favicon.png"
+				class="mws-favicon"
+			/>
+		</$image>
 	</div>
 	<div class="mws-wiki-card-content">
 		<div class="mws-wiki-card-header">

plugins/tiddlywiki/multiwikiserver/admin-ui/missing-favicon.png.meta

@@ -0,0 +1,2 @@
+title: $:/MultiWikiServer/images/missing-favicon.png
+type: image/png