Show broken image icon when image fails to load

TODO.md

@@ -3,7 +3,7 @@
   - Downloading
     - Bottom/top bar
   - Verify things work with chat.privacytools.io (subdomain weirdness)
-  - Show real progression for thumbnail loadings, uploads and downloads
+  - Show real progression for mxc thumbnail loadings, uploads and downloads
 
   - Support m.file thumbnails
   - Generate video thumbnails
@@ -32,7 +32,7 @@
   - When qml syntax highlighting supports ES6 string interpolation, use that
 
 - Fixes
-  - Code not colored in room subtitle
+  - `code` not colored in room subtitle
   - In the "Leave me" room, "join > Hi > left" aren't combined
   - Event delegates changing height don't scroll the list
   - When selecting text and scrolling up, selection stops working after a while
@@ -59,10 +59,6 @@
   - Way to open context menus without a right mouse button
   - `smartVerticalFlick()` gradual acceleration
 
-  - Link previews
-    - Support showing images at the place they should be instead of always
-      at the end of the message
-
   - Just use Shortcut onHeld instead of analyzing the current velocity
     in `smartVerticalFlick()`
   - Thinner expand arrow icon
@@ -120,7 +116,7 @@
   - Add room
   - Prevent using the composer if no permission (power levels)
     - Prevent using an alias if that user is not in the room or no permission
-  - Spinner when loading past room events or images 
+  - Spinner when loading past room events
 
   - Theming
     - Bundle fonts
@@ -170,7 +166,6 @@
   - Check if username exists on login screen
   - `pyotherside.atexit()`
   - Logout previous session if adding an account that's already connected
-  - Image provider: on failed conversion, way to show a "broken image" thumb?
   - Config file format
 
   - Startup improvements

src/icons/thin/broken-image.svg

@@ -0,0 +1,4 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m19 10.975v2.568c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-7.362v-20h9.5c.312-.749.763-1.424 1.316-2h-12.816v24h10.189c3.163 0 9.811-7.223 9.811-9.614v-3.886c-.623.26-1.297.421-2 .475zm-.5-10.975c-2.483 0-4.5 2.015-4.5 4.5s2.017 4.5 4.5 4.5 4.5-2.015 4.5-4.5-2.017-4.5-4.5-4.5zm2.122 3.086-1.414 1.414 1.414 1.414-.708.707-1.414-1.414-1.414 1.414-.707-.707 1.414-1.414-1.414-1.414.707-.708 1.414 1.414 1.414-1.414z"/>
+    <path d="m4.2794628 7.5295622c0-.7448222.6044937-1.3493164 1.3493161-1.3493164.7448225 0 1.349316.6044942 1.349316 1.3493164 0 .745722-.6044935 1.3493161-1.349316 1.3493161-.7448224 0-1.3493161-.6035941-1.3493161-1.3493161zm8.0958972.4497722-2.265953 3.5981756-2.231768-1.7631061-3.5981762 5.3612831h12.5936182z" stroke-width=".899544"/>
+</svg>

src/qml/Base/HImage.qml

@@ -75,4 +75,12 @@ Image {
 
         Behavior on value { HNumberAnimation { factor: 2 } }
     }
+
+    HIcon {
+        anchors.centerIn: parent
+        visible: image.status === Image.Error
+        svgName: "broken-image"
+        dimension: Math.max(16, Math.min(parent.width, parent.height) * 0.2)
+        colorize: theme.colors.negativeBackground
+    }
 }