Potentially fixed image loading on ssr

package.json

@@ -18,12 +18,14 @@
     "isomorphic-fetch": "^2.2.1",
     "lint-staged": "^4.1.3",
     "mapbox-gl": "^0.45.0",
+    "md5-file": "^4.0.0",
     "moment": "^2.19.3",
     "node-sass-chokidar": "^0.0.3",
     "normalize.css": "^7.0.0",
     "npm": "^6.0.0",
     "npm-run-all": "^4.1.1",
     "openmined-ui": "^0.0.6",
+    "path": "^0.12.7",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-helmet": "^5.2.0",
@@ -37,14 +39,15 @@
     "redux-thunk": "^2.2.0"
   },
   "lint-staged": {
-    "src/**/*.{js,jsx,json,css}": ["prettier --single-quote --write", "git add"]
+    "src/**/*.{js,jsx,json,css}": [
+      "prettier --single-quote --write",
+      "git add"
+    ]
   },
   "scripts": {
     "precommit": "lint-staged",
-    "build:css":
-      "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
-    "watch:css":
-      "yarn build:css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
+    "build:css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
+    "watch:css": "yarn build:css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
     "start:js": "react-scripts start",
     "build": "yarn build:css && react-scripts build",
     "test": "react-scripts test --env=jsdom",

server/index.js

@@ -1,4 +1,19 @@
-require('ignore-styles');
+const md5File = require('md5-file');
+const path = require('path');
+
+// Ignore those pesky styles
+const ignoreStyles = require('ignore-styles');
+const register = ignoreStyles.default;
+const extensions = ['.gif', '.jpeg', '.jpg', '.png', '.svg'];
+
+register(ignoreStyles.DEFAULT_EXTENSIONS, (mod, filename) => {
+  const ext = extensions.find(f => filename.endsWith(f));
+  if (!ext) return ignoreStyles.noOp();
+
+  const hash = md5File.sync(filename).slice(0, 8);
+  const bn = path.basename(filename).replace(/(\.\w{3})$/, `.${hash}$1`);
+  mod.exports = `/static/media/${bn}`;
+});
 
 require('babel-register')({
   ignore: /\/(build|node_modules)\//,

yarn.lock

@@ -5503,6 +5503,10 @@ math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
 
+md5-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/md5-file/-/md5-file-4.0.0.tgz#f3f7ba1e2dd1144d5bf1de698d0e5f44a4409584"
+
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -6693,6 +6697,13 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 pause-stream@0.0.11:
   version "0.0.11"
   resolved "https://registry.yarnpkg.com/pause-stream/-/pause-stream-0.0.11.tgz#fe5a34b0cbce12b5aa6a2b403ee2e73b602f1445"
@@ -7129,7 +7140,7 @@ process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
 
-process@^0.11.10:
+process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"