Merge pull request #117 from reZach/load-images

Load images

Author: reZach

.babelrc

@@ -10,7 +10,8 @@
                     "Core": "./app/src/core",
                     "Pages": "./app/src/pages",
                     "Redux": "./app/src/redux",
-                    "I18n": "./app/localization"
+                    "I18n": "./app/localization",
+                    "Images": "./resources/images"
                 }
             },
             "@babel/plugin-syntax-dynamic-import"

app/src/constants/routes.json

@@ -4,5 +4,6 @@
   "MOTD": "/motd",
   "LOCALIZATION": "/localization",
   "UNDOREDO": "/undoredo",
-  "CONTEXTMENU": "/contextmenu"
+  "CONTEXTMENU": "/contextmenu",
+  "IMAGE": "/image"
 }

app/src/core/nav.jsx

@@ -228,6 +228,11 @@ class Nav extends React.Component {
                   onClick={() => this.navigate(ROUTES.CONTEXTMENU)}>
                   Custom context menu
                 </a>
+                <a
+                  className="navbar-item"
+                  onClick={() => this.navigate(ROUTES.IMAGE)}>
+                  Sample image loaded
+                </a>
               </div>
             </div>
           </div>

app/src/core/routes.jsx

@@ -24,6 +24,9 @@ const UndoRedo = loadable(() =>
 const ContextMenu = loadable(() =>
   import(/* webpackChunkName: "ContextMenuChunk" */ "Pages/contextmenu/contextmenu")
 );
+const Image = loadable(() =>
+  import(/* webpackChunkName: "ContextMenuChunk" */ "Pages/image/image")
+);
 
 class AppRoutes extends React.Component {
   render() {    
@@ -35,6 +38,7 @@ class AppRoutes extends React.Component {
         <Route path={ROUTES.LOCALIZATION} element={<Localization />}></Route>
         <Route path={ROUTES.UNDOREDO} element={<UndoRedo />}></Route>
         <Route path={ROUTES.CONTEXTMENU} element={<ContextMenu />}></Route>
+        <Route path={ROUTES.IMAGE} element={<Image />}></Route>
       </Routes>
     );
   }

app/src/pages/image/image.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import img from "Images/testimage.png";
+
+class Image extends React.Component {
+  render() {
+    return (
+      <section className="section">
+        <div className="container">
+          <h1 className="title is-1">Loading images</h1>
+        </div>
+        <div className="container mt-2">
+          This page is to demonstrate that we can load an image hosted from a
+          directory in our project.
+        </div>
+        <div className="container mt-2">
+          <img src={img} />
+        </div>
+      </section>
+    );
+  }
+}
+
+export default Image;

app/src/pages/welcome/welcome.jsx

@@ -28,6 +28,7 @@ class Welcome extends React.Component {
               <Link to={ROUTES.LOCALIZATION}>Changing locales.</Link> <br />
               <Link to={ROUTES.UNDOREDO}>Undo/redoing actions.</Link> <br />
               <Link to={ROUTES.CONTEXTMENU}>Custom context menu.</Link> <br />
+              <Link to={ROUTES.IMAGE}>Sample image loaded.</Link> <br />
             </div>
           </div>
         </section>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "secure-electron-template",
-  "version": "19.0.1",
+  "version": "20.0.0",
   "description": "The best way to build Electron apps with security in mind.",
   "private": true,
   "main": "app/electron/main.js",

resources/images/testimage.png

@@ -64,7 +64,18 @@ module.exports = {
       },
       // loads common image formats
       {
-        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
+        test: /\.(svg|png|jpg|gif)$/,
+        include: [
+          path.resolve(__dirname, "resources/images")
+        ],
+        type: "asset/inline"
+      },
+      // loads common font formats
+      {
+        test: /\.(eot|woff|woff2|ttf)$/,
+        include: [
+          path.resolve(__dirname, "resources/fonts")
+        ],
         type: "asset/inline"
       }
     ]