Change image alt text in viewer to indicate when images are loading, and when loading fails

Related to #79

app/Resources/Viewer/scripts/discord.js

@@ -26,6 +26,7 @@ const DISCORD = (function() {
 	let templateUserAvatar;
 	let templateAttachmentDownload;
 	let templateEmbedImage;
+	let templateEmbedImageWithSize;
 	let templateEmbedRich;
 	let templateEmbedRichNoDescription;
 	let templateEmbedUrl;
@@ -64,6 +65,19 @@ const DISCORD = (function() {
 		return "<p>" + processed + "</p>";
 	};
 	
+	const getImageEmbed = function(url, image) {
+		if (!SETTINGS.enableImagePreviews) {
+			return "";
+		}
+		
+		if (image.width && image.height) {
+			return templateEmbedImageWithSize.apply({ url, src: image.url, width: image.width, height: image.height });
+		}
+		else {
+			return templateEmbedImage.apply({ url, src: image.url });
+		}
+	};
+	
 	return {
 		setup() {
 			templateChannelServer = new TEMPLATE([
@@ -114,7 +128,12 @@ const DISCORD = (function() {
 			
 			// noinspection HtmlUnknownTarget
 			templateEmbedImage = new TEMPLATE([
-				"<a href='{url}' class='embed thumbnail'><img src='{src}' alt='(image attachment not found)'></a><br>"
+				"<a href='{url}' class='embed thumbnail'><img src='{src}' alt='(image attachment is loading...)' onerror='DISCORD.handleImageLoadError(this)'></a><br>"
+			].join(""));
+			
+			// noinspection HtmlUnknownTarget
+			templateEmbedImageWithSize = new TEMPLATE([
+				"<a href='{url}' class='embed thumbnail'><img src='{src}' width='{width}' height='{height}' alt='(image attachment is loading...)' onerror='DISCORD.handleImageLoadError(this)'></a><br>"
 			].join(""));
 			
 			// noinspection HtmlUnknownTarget
@@ -145,6 +164,12 @@ const DISCORD = (function() {
 			].join(""));
 		},
 		
+		handleImageLoadError(ele) {
+			// noinspection JSUnusedGlobalSymbols
+			ele.onerror = null;
+			ele.setAttribute("alt", "(image attachment not found)");
+		},
+		
 		isImageAttachment(attachment) {
 			const dot = attachment.url.lastIndexOf(".");
 			const ext = dot === -1 ? "" : attachment.url.substring(dot).toLowerCase();
@@ -183,10 +208,10 @@ const DISCORD = (function() {
 							return templateEmbedUnsupported.apply(embed);
 						}
 						else if ("image" in embed && embed.image.url) {
-							return SETTINGS.enableImagePreviews ? templateEmbedImage.apply({ url: embed.url, src: embed.image.url }) : "";
+							return getImageEmbed(embed.url, embed.image);
 						}
 						else if ("thumbnail" in embed && embed.thumbnail.url) {
-							return SETTINGS.enableImagePreviews ? templateEmbedImage.apply({ url: embed.url, src: embed.thumbnail.url }) : "";
+							return getImageEmbed(embed.url, embed.thumbnail);
 						}
 						else if ("title" in embed && "description" in embed) {
 							return templateEmbedRich.apply(embed);

app/Resources/Viewer/styles/messages.css

@@ -112,6 +112,7 @@
 }
 
 .message .thumbnail img {
+  width: auto;
   max-width: 100%;
   max-height: 320px;
   border-radius: 3px;