From 7a3df1c7d65a5586a30c3e503f0460cb165904d3 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 17 Jan 2019 20:59:06 -0600
Subject: [PATCH] Support image URLs in HTML templates

Expands the image build process to also support the right paths when used in
HTML templates.
---
 src/vector/index.html |  2 +-
 webpack.config.js     | 57 ++++++++++++++++++++++++++++---------------
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/vector/index.html b/src/vector/index.html
index a5f3af9b..1796849f 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -40,7 +40,7 @@
         window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
     </script>
     <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
-    <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
+    <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <audio id="messageAudio">
         <source src="media/message.ogg" type="audio/ogg" />
         <source src="media/message.mp3" type="audio/mpeg" />
diff --git a/webpack.config.js b/webpack.config.js
index fa2af685..fa5621b2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -55,27 +55,32 @@ module.exports = {
             },
             {
                 test: /\.(gif|png|svg|ttf)$/,
-                loader: 'file-loader',
-                options: {
-                    // Use a content-based hash in the name so that we can set a
-                    // long cache lifetime for assets while still delivering
-                    // changes quickly.
-                    name: '[name].[hash:7].[ext]',
-                    outputPath: function(url, resourcePath, context) {
-                        // Merge assets found via CSS and imports into a single
-                        // tree, while also preserving directories under **/res.
-                        const prefix = /^.*\/res\//;
-                        const outputDir = path.dirname(resourcePath).replace(prefix, "");
-                        return path.join(outputDir, path.basename(url));
+                // Use a content-based hash in the name so that we can set a long cache
+                // lifetime for assets while still delivering changes quickly.
+                oneOf: [
+                    {
+                        // Images referenced in HTML files
+                        issuer: /\.html$/,
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[hash:7].[ext]',
+                            outputPath: getImgOutputPath,
+                        },
                     },
-                    publicPath: function(url, resourcePath, context) {
-                        // Merge assets found via CSS and imports into a single
-                        // tree, while also preserving directories under **/res.
-                        const prefix = /^.*\/res\//;
-                        const outputDir = path.dirname(resourcePath).replace(prefix, "");
-                        return path.join("../..", outputDir, path.basename(url));
+                    {
+                        // Images referenced in JS and CSS files
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[hash:7].[ext]',
+                            outputPath: getImgOutputPath,
+                            publicPath: function(url, resourcePath) {
+                                // JS and CSS image usages end up the `bundles/[hash]` output
+                                // directory, so we adjust the final path to navigate up twice.
+                                return path.join("../..", getImgOutputPath(url, resourcePath));
+                            },
+                        },
                     },
-                },
+                ],
             },
         ],
         noParse: [
@@ -178,3 +183,17 @@ module.exports = {
         inline: false,
     },
 };
+
+/**
+ * Merge assets found via CSS and imports into a single tree, while also preserving
+ * directories under `res`.
+ *
+ * @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
+ * @param {string} resourcePath The absolute path to the source file with unmodified name.
+ * @return {string} The returned paths will look like `img/warning.1234567.svg`.
+ */
+function getImgOutputPath(url, resourcePath) {
+    const prefix = /^.*\/res\//;
+    const outputDir = path.dirname(resourcePath).replace(prefix, "");
+    return path.join(outputDir, path.basename(url));
+}