From 496b070d2aed31eb57116c2c1a0d7c5f741a12e4 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 1 Sep 2020 12:21:32 +0200
Subject: [PATCH] If adding .png fallback fails, revert to original URL

---
 docs/source/configuration.rst     |  2 +-
 src/templates/directives/image.js | 21 +++++++++++++++------
 src/templates/image.js            |  2 +-
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/docs/source/configuration.rst b/docs/source/configuration.rst
index 20c79619a..a2b68deb6 100644
--- a/docs/source/configuration.rst
+++ b/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``
 
diff --git a/src/templates/directives/image.js b/src/templates/directives/image.js
index 60703fd50..88fa8ab4a 100644
--- a/src/templates/directives/image.js
+++ b/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>`
     );
 });
diff --git a/src/templates/image.js b/src/templates/image.js
index 4f2e075b1..95e2c5d6e 100644
--- a/src/templates/image.js
+++ b/src/templates/image.js
@@ -1,4 +1,4 @@
 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)}`;