better visual style of broken images

css/base.css

@@ -1529,16 +1529,19 @@ i.search {
   color:#777;
 }
 
-/* Inline image style */
+/* Inline and preview image styles */
-.inline-image {
+.inline-image, .image-preview {
   position: relative;
-  max-width: 36rem;
-  max-height: 24rem;
   overflow: hidden;
   border-radius: 0.1rem;
   display: block;
 }
 
+.inline-image {
+  max-width: 36rem;
+  max-height: 24rem;
+}
+
 /* Container with upload progress */
 .inline-image > .rounded-container {
   position: relative;
@@ -1549,6 +1552,31 @@ i.search {
   border-right: 0.25rem solid transparent;
 }
 
+/* Broken image graphics which replaces the stock graphics. */
+img.inline-image::before, img.image-preview::before {
+  font-size: 0.9rem;
+  font-weight: lighter;
+  color: #666;
+  display:flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  background: center no-repeat #ccc url("../img/broken_image.png");
+}
+
+img.inline-image::before {
+  content: attr(alt);
+  background-size: 2rem 2rem;
+}
+
+img.image-preview::before {
+  content: " ";
+  background-size: 8rem 8rem;
+}
+
 /* Attachment styles */
 .attachment {
   display: flex;

src/widgets/chat-message.jsx

@@ -181,6 +181,7 @@ function draftyFormatter(style, data, values, key) {
           attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
           if (!Drafty.isProcessing(data)) {
             attr.src = this.props.tinode.authorizeURL(sanitizeImageUrl(attr.src));
+            attr.alt = data.name;
             if (attr.src) {
               attr.onClick = this.handleImagePreview;
               attr.className += ' image-clickable';

src/widgets/image-preview.jsx

@@ -67,7 +67,7 @@ export default class ImagePreview extends React.PureComponent {
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
         <div id="image-preview-container" ref={(node) => this.assignWidth(node)}>
-          <img src={this.props.content.url} style={size} />
+          <img src={this.props.content.url} style={size} className="image-preview" alt={this.props.content.filename} />
         </div>
         {this.props.onSendMessage ?
           <SendMessage

umd/index.dev.js

@@ -6723,6 +6723,7 @@ function draftyFormatter(style, data, values, key) {
 
           if (!tinode_sdk__WEBPACK_IMPORTED_MODULE_2__["Drafty"].isProcessing(data)) {
             attr.src = this.props.tinode.authorizeURL(Object(_lib_utils_js__WEBPACK_IMPORTED_MODULE_7__["sanitizeImageUrl"])(attr.src));
+            attr.alt = data.name;
 
             if (attr.src) {
               attr.onClick = this.handleImagePreview;
@@ -8461,7 +8462,9 @@ class ImagePreview extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureComp
       ref: node => this.assignWidth(node)
     }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", {
       src: this.props.content.url,
-      style: size
+      style: size,
+      className: "image-preview",
+      alt: this.props.content.filename
     })), this.props.onSendMessage ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
       messagePrompt: "add_image_caption",
       acceptBlank: true,