Webpacker image in JS example

Author: eizengan

app/javascript/packs/application.js

@@ -7,6 +7,7 @@ import Rails from "@rails/ujs"
 import Turbolinks from "turbolinks"
 import * as ActiveStorage from "@rails/activestorage"
 import "channels"
+import "../src/change-background"
 
 const images = require.context("../images", true)
 const imagePath = name => images(name, true)

app/javascript/src/change-background.js

@@ -0,0 +1,12 @@
+import avatarUrl from '../images/avatar.png'
+
+document.addEventListener(
+  "turbolinks:load",
+  () => {
+    document.getElementById('add-avatar-button').onclick = () => {
+      const image = new Image();
+      image.src = avatarUrl;
+      document.getElementById('so-many-avatars').appendChild(image);
+    }
+  }
+)

app/javascript/stylesheets/global.scss

@@ -23,3 +23,15 @@ body {
   // TRICKY: ensure all child nodes' margins stay inside container
   padding: 1px;
 }
+
+section {
+  margin: 2em 1em 0;
+}
+
+button {
+  background-color: #1663b2;
+  border: 0;
+  border-radius: 0.25em;
+  color: #fff;
+  padding: 1em;
+}

app/views/application/show.html.erb

@@ -58,4 +58,21 @@
       vie.
     </p>
   </section>
+
+  <section>
+    <h2>On image loading within JS:</h2>
+    <p>
+      Bjork is one of those artists that I always forget about, but am always
+      stoked to return to after a hiatus. 'Post' truly is an incredible album,
+      and features 'Army of Me', which has a music video containing what I can
+      only assume was the inspiration for that Tesla truck everyone mocked to
+      death. Very PS1.
+    </p>
+    <p>
+      Speaking of 'Army of Me', the button below will use Webpacker-loaded
+      images within Webpacker-loaded JS to do that thing.
+    </p>
+    <button id="add-avatar-button" type="button">I MUST HAVE MORE</button>
+    <div id="so-many-avatars"></div>
+  </section>
 </article>