Load the image directly

* Makes images viewable without JS.

* Works around lack of CSP nonce support in IE and Edge < 40 (fixes
  #2935).

Fixes #2866.

server/src/pages/shot/page.js

@@ -2,19 +2,5 @@ const { Page } = require("../../reactruntime");
 
 exports.page = new Page({
   dir: __dirname,
-  viewModule: require("./view.js"),
-  extraBodyJavascript: `
-(function () {
-  var el = document.getElementById("clipImage");
-  if (el) {
-    el.addEventListener("load", function () {
-      el.style.display = 'inline';
-      var spinner = document.getElementById("spinner");
-      if (spinner) {
-        spinner.style.display = 'none';
-      }
-    }, false);
-  }
-})();
-`
+  viewModule: require("./view.js")
 });

server/src/pages/shot/view.js

@@ -10,17 +10,11 @@ const reactruntime = require("../../reactruntime");
 class Clip extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      loading: true,
-      imageDisplay: "none"
-    };
   }
 
   componentDidMount() {
+    // TODO: how can we resize nicely if JS is disabled? maybe CSS?
     let image = this.clipImage;
-    if (image.complete) {
-      this.onImageLoaded();
-    }
     let onResize = () => {
       let windowHeight = window.innerHeight;
       let paddingTop = Math.floor((windowHeight - image.height - 35) / 2);
@@ -41,10 +35,7 @@ class Clip extends React.Component {
       console.warn("Somehow there's a shot without an image");
       return null;
     }
-    let node = <img id="clipImage" style={{height: "auto", width: clip.image.dimensions.x + "px", maxWidth: "100%", display: this.state.imageDisplay}} ref={clipImage => this.clipImage = clipImage} src={ clip.image.url } alt={ clip.image.text } onLoad = { this.onImageLoaded.bind(this) } />;
-    // Note that in server/src/pages/shot/page.js there is also JavaScript defined
-    // that displays the image onload, as a backup to make sure the image always
-    // gets displayed even if the bundle doesn't load
+    let node = <img id="clipImage" style={{height: "auto", width: clip.image.dimensions.x + "px", maxWidth: "100%", display: this.state.imageDisplay}} ref={clipImage => this.clipImage = clipImage} src={ clip.image.url } alt={ clip.image.text } />;
     return <div ref={clipContainer => this.clipContainer = clipContainer} className="clip-container">
       { this.copyTextContextMenu() }
       { this.renderLoader() }
@@ -54,13 +45,6 @@ class Clip extends React.Component {
     </div>;
   }
 
-  onImageLoaded() {
-    this.setState({
-      loading: false,
-      imageDisplay: "inline"
-    });
-  }
-
   renderLoader() {
     return (
       <div id="spinner" className="spinner">