js: Pull in static assets via import.

static/js/emoji.js

@@ -72,6 +72,9 @@ function build_emoticon_translations({emoticon_conversions}) {
 const zulip_emoji = {
     id: "zulip",
     emoji_name: "zulip",
+    // We don't use a webpack'd URL here, for consistency with the
+    // server-side markdown, which doesn't want to render it into the
+    // message content.
     emoji_url: "/static/generated/emoji/images/emoji/unicode/zulip.png",
     is_realm_emoji: true,
     deactivated: false,

static/js/favicon.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 
+import static_favicon_image from "../images/favicon.svg";
 import render_favicon_svg from "../templates/favicon.svg.hbs";
 
 import * as blueslip from "./blueslip";
@@ -39,7 +40,7 @@ export function update_favicon(new_message_count, pm_count) {
         }
 
         if (new_message_count === 0 && pm_count === 0) {
-            $("#favicon").attr("href", "/static/images/favicon.svg?v=4");
+            $("#favicon").attr("href", static_favicon_image);
             return;
         }
 

static/js/hotspots.js

@@ -1,6 +1,7 @@
 import $ from "jquery";
 import _ from "lodash";
 
+import whale_image from "../images/hotspots/whale.svg";
 import render_hotspot_icon from "../templates/hotspot_icon.hbs";
 import render_hotspot_overlay from "../templates/hotspot_overlay.hbs";
 
@@ -55,9 +56,6 @@ const HOTSPOT_LOCATIONS = new Map([
     ],
 ]);
 
-// popover illustration url(s)
-const WHALE = "/static/images/hotspots/whale.svg";
-
 export function post_hotspot_as_read(hotspot_name) {
     channel.post({
         url: "/json/users/me/hotspots",
@@ -207,7 +205,7 @@ function insert_hotspot_into_DOM(hotspot) {
         name: hotspot.name,
         title: hotspot.title,
         description: hotspot.description,
-        img: WHALE,
+        img: whale_image,
     });
 
     const hotspot_icon_HTML = render_hotspot_icon({

static/js/portico/landing-page.js

@@ -1,5 +1,11 @@
 import $ from "jquery";
 
+import macbook_image from "../../images/app-screenshots/macbook.png";
+import microsoft_image from "../../images/app-screenshots/microsoft.png";
+import ubuntu_image from "../../images/app-screenshots/ubuntu.png";
+import android_image from "../../images/app-screenshots/zulip-android.png";
+import iphone_image from "../../images/app-screenshots/zulip-iphone-rough.png";
+
 import {detect_user_os} from "./tabbed-instructions";
 import render_tabs from "./team";
 
@@ -14,7 +20,7 @@ const hello_events = function () {
 const apps_events = function () {
     const info = {
         windows: {
-            image: "/static/images/app-screenshots/microsoft.png",
+            image: microsoft_image,
             alt: "Windows",
             description:
                 "Zulip for Windows is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
@@ -24,7 +30,7 @@ const apps_events = function () {
             app_type: "desktop",
         },
         mac: {
-            image: "/static/images/app-screenshots/macbook.png",
+            image: macbook_image,
             alt: "macOS",
             description:
                 "Zulip on macOS is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",
@@ -35,7 +41,7 @@ const apps_events = function () {
             app_type: "desktop",
         },
         android: {
-            image: "/static/images/app-screenshots/zulip-android.png",
+            image: android_image,
             alt: "Android",
             description: "Zulip's native Android app makes it easy to keep up while on the go.",
             show_instructions: false,
@@ -44,7 +50,7 @@ const apps_events = function () {
             app_type: "mobile",
         },
         ios: {
-            image: "/static/images/app-screenshots/zulip-iphone-rough.png",
+            image: iphone_image,
             alt: "iOS",
             description: "Zulip's native iOS app makes it easy to keep up while on the go.",
             show_instructions: false,
@@ -52,7 +58,7 @@ const apps_events = function () {
             app_type: "mobile",
         },
         linux: {
-            image: "/static/images/app-screenshots/ubuntu.png",
+            image: ubuntu_image,
             alt: "Linux",
             description:
                 "Zulip on the Linux desktop is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.",

static/js/settings_ui.js

@@ -1,12 +1,14 @@
 import $ from "jquery";
 
+import checkbox_image from "../images/checkbox-green.svg";
+
 import {$t, $t_html} from "./i18n";
 import * as loading from "./loading";
 import * as ui_report from "./ui_report";
 
 export function display_checkmark($elem) {
     const check_mark = document.createElement("img");
-    check_mark.src = "/static/images/checkbox-green.svg";
+    check_mark.src = checkbox_image;
     $elem.prepend(check_mark);
     $(check_mark).css("width", "13px");
 }