If adding .png fallback fails, revert to original URL

docs/source/configuration.rst

@@ -850,7 +850,7 @@ If you are using prebinding, can specify the fullname of the currently
 logged in user, otherwise the user's vCard will be fetched.
 
 geouri_regex
-----------------
+------------
 
 * Default:  ``/https:\/\/www.openstreetmap.org\/.*#map=[0-9]+\/([\-0-9.]+)\/([\-0-9.]+)\S*/g``
 

src/templates/directives/image.js

@@ -2,25 +2,34 @@ import { converse } from "@converse/headless/converse-core";
 import { directive, html } from "lit-html";
 
 
-export const renderImage = directive((url, onLoad, onClick) => part => {
+/**
+ * lit-html directive which attempts to render an <img> element from a URL.
+ * It will fall back to rendering an <a> element if it can't.
+ *
+ * @param { String } src - The value that will be assigned to the `src` attribute of the `<img>` element.
+ * @param { String } href - The value that will be assigned to the `href` attribute of the `<img>` element.
+ * @param { Function } onLoad - A callback function to be called once the image has loaded.
+ * @param { Function } onClick - A callback function to be called once the image has been clicked.
+*/
+export const renderImage = directive((src, href, onLoad, onClick) => part => {
     function onError () {
         const u = converse.env.utils;
-        if (u.isURLWithImageExtension(url)) {
-            part.setValue(u.convertUrlToHyperlink(url));
+        if (u.isURLWithImageExtension(src)) {
+            part.setValue(u.convertUrlToHyperlink(href));
             part.commit();
         } else {
             // Before giving up and falling back to just rendering a hyperlink,
             // we attach `.png` and try one more time.
             // This works with some Imgur URLs
-            part.setValue(renderImage(`${url}.png`, onLoad, onClick));
+            part.setValue(renderImage(`${src}.png`, href, onLoad, onClick));
             part.commit();
         }
     }
     part.setValue(
-        html`<a href="${url}"
+        html`<a href="${href}"
                 class="chat-image__link"
                 target="_blank"
                 rel="noopener"
-            ><img class="chat-image img-thumbnail" src="${url}" @click=${onClick} @error=${onError} @load=${onLoad}/></a>`
+            ><img class="chat-image img-thumbnail" src="${src}" @click=${onClick} @error=${onError} @load=${onLoad}/></a>`
     );
 });

src/templates/image.js

 import { html } from "lit-html";
 import { renderImage } from "./directives/image.js";
 
-export default (o) => html`${renderImage(o.url, o.onLoad, o.onClick)}`;
+export default (o) => html`${renderImage(o.url, o.url, o.onLoad, o.onClick)}`;