diff --git a/scouting/BUILD b/scouting/BUILD
index 2a2d0ba..448b509 100644
--- a/scouting/BUILD
+++ b/scouting/BUILD
@@ -31,8 +31,7 @@
     data = [
         ":main_bundle_compiled_runfiles",
         "//scouting/webserver",
-        "//scouting/www:index.html",
-        "//scouting/www:zonejs_copy",
+        "//scouting/www:static_files",
     ],
     visibility = ["//visibility:public"],
 )
diff --git a/scouting/scouting_test.ts b/scouting/scouting_test.ts
index f400430..2ffa136 100644
--- a/scouting/scouting_test.ts
+++ b/scouting/scouting_test.ts
@@ -1,5 +1,16 @@
 import {browser, by, element, protractor} from 'protractor';
 
+// Loads the page (or reloads it) and deals with the "Are you sure you want to
+// leave this page" popup.
+async function loadPage() {
+  await browser.get(browser.baseUrl).catch(function () {
+    return browser.switchTo().alert().then(function (alert) {
+      alert.accept();
+      return browser.get(browser.baseUrl);
+    });
+  });
+}
+
 // Returns the contents of the header that displays the "Auto", "TeleOp", and
 // "Climb" labels etc.
 function getHeadingText() {
@@ -27,7 +38,7 @@
 
 describe('The scouting web page', () => {
   it('should: review and submit correct data.', async () => {
-    await browser.get(browser.baseUrl);
+    await loadPage();
 
     expect(await getHeadingText()).toEqual('Team Selection');
     // Just sending "971" to the input fields is insufficient. We need to
@@ -78,4 +89,27 @@
     // correctly. Right now the /requests/submit/data_scouting endpoint is not
     // implemented.
   });
+
+  it('should: load all images successfully.', async () => {
+    await loadPage();
+
+    // Get to the Auto display with the field pictures.
+    expect(await getHeadingText()).toEqual('Team Selection');
+    await element(by.buttonText('Next')).click();
+    expect(await getHeadingText()).toEqual('Auto');
+
+    // We expect 2 fully loaded images.
+    browser.executeAsyncScript(function (callback) {
+      let images = document.getElementsByTagName('img');
+      let numLoaded = 0;
+      for (let i = 0; i < images.length; i += 1) {
+        if (images[i].naturalWidth > 0) {
+          numLoaded += 1;
+        }
+      }
+      callback(numLoaded);
+    }).then(function (numLoaded) {
+      expect(numLoaded).toBe(2);
+    });
+  });
 });
diff --git a/scouting/www/BUILD b/scouting/www/BUILD
index 8a32f89..f0b91f6 100644
--- a/scouting/www/BUILD
+++ b/scouting/www/BUILD
@@ -3,10 +3,6 @@
 load("@npm//@bazel/concatjs:index.bzl", "concatjs_devserver")
 load("@npm//@babel/cli:index.bzl", "babel")
 
-exports_files([
-    "index.html",
-])
-
 ts_library(
     name = "app",
     srcs = glob([
@@ -67,6 +63,25 @@
         "npm/node_modules/zone.js/dist/zone.min.js",
     ],
     cmd = "cp $(SRCS) $(OUTS)",
+)
+
+genrule(
+    name = "field_pictures_copy",
+    srcs = ["//third_party/y2022/field:pictures"],
+    outs = [
+        "pictures/field/balls.jpeg",
+        "pictures/field/quadrants.jpeg",
+    ],
+    cmd = "cp $(SRCS) $(@D)/pictures/field/",
+)
+
+filegroup(
+    name = "static_files",
+    srcs = [
+        "index.html",
+        ":field_pictures_copy",
+        ":zonejs_copy",
+    ],
     visibility = ["//visibility:public"],
 )
 
@@ -74,8 +89,7 @@
     name = "devserver",
     serving_path = "/main_bundle.js",
     static_files = [
-        "index.html",
-        ":zonejs_copy",
+        ":static_files",
     ],
     deps = [":main_bundle_compiled"],
 )
diff --git a/scouting/www/entry/entry.ng.html b/scouting/www/entry/entry.ng.html
index c5cf233..c993467 100644
--- a/scouting/www/entry/entry.ng.html
+++ b/scouting/www/entry/entry.ng.html
@@ -21,8 +21,7 @@
 
     <div *ngSwitchCase="'Auto'" id="auto" class="container-fluid">
         <div class="row">
-            <!--Image here-->
-            <h4>Image</h4>
+            <img src="/pictures/field/balls.jpeg" alt="Image">
             <form>
                 <!--Choice for each ball location-->
                 <input type="checkbox" name="balls" value="1" id="ball-1"><label for="ball-1">Ball 1</label>
@@ -34,8 +33,7 @@
             </form>
         </div>
         <div class="row">
-            <!--Image here-->
-            <h4>Image</h4>
+            <img src="/pictures/field/quadrants.jpeg" alt="Image">
             <form>
                 <input type="radio" name="quadrant" id="first" value="Quadrant 1">
                 <label for="first">Quadrant 1</label>