Web: show last-rendered image in job details

It doesn't update automatically yet (still needs SocketIO notifications),
and there is no check yet for whether there is actually any last-rendered
image at all, but at least there is a component that shows the image.

web/app/src/components/jobs/JobDetails.vue

@@ -2,6 +2,8 @@
   <h2 class="column-title">Job Details</h2>
 
   <template v-if="hasJobData">
+    <last-rendered-image :jobID="jobData.id" />
+
     <dl>
       <dt class="field-id">ID</dt>
       <dd :title="jobData.id">{{ jobData.id }}</dd>
@@ -54,6 +56,7 @@
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api';
 import { apiClient } from '@/stores/api-query-count';
+import LastRenderedImage from '@/components/jobs/LastRenderedImage.vue'
 
 export default {
   props: [
@@ -62,6 +65,9 @@ export default {
   emits: [
     "reshuffled", // Emitted when the size of this component may have changed. Used to resize other components in response.
   ],
+  components: {
+    LastRenderedImage,
+  },
   data() {
     return {
       datetime: datetime, // So that the template can access it.

web/app/src/components/jobs/LastRenderedImage.vue

@@ -0,0 +1,48 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { api } from '@/urls';
+import { JobsApi } from '@/manager-api';
+import { apiClient } from '@/stores/api-query-count';
+
+const props = defineProps(['jobID']);
+const imageURL = ref('');
+
+const jobsApi = new JobsApi(apiClient);
+
+function fetchImageURL(jobID) {
+  jobsApi.fetchJobLastRenderedInfo(jobID)
+    .then((info) => {
+      // info is an api.JobLastRenderedImageInfo object.
+      for (let suffix of info.suffixes) {
+        if (!suffix.includes("-tiny")) continue;
+
+        let url = new URL(api());
+        url.pathname = info.base + "/" + suffix
+        imageURL.value = url.toString();
+        break;
+      }
+    })
+    .catch((error) => { console.warn("error fetching last-rendered image info:", error) });
+}
+
+watch(() => props.jobID, (newJobID) => {
+  console.log("Last-Rendered Image: new job ID: ", newJobID);
+  fetchImageURL(newJobID);
+});
+fetchImageURL(props.jobID);
+
+</script>
+
+<template>
+  <div v-if="imageURL != ''" class="lastRendered">
+    <img :src="imageURL" alt="Last-rendered image for this job">
+  </div>
+</template>
+
+<style scoped>
+.lastRendered {
+  width: 200px;
+  height: 112px;
+  float: right;
+}
+</style>