create thumbnail from image service if there is no thumbnail service

content/webapp/components/IIIFViewer/IIIFCanvasThumbnail.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent, useState } from 'react';
 import styled from 'styled-components';
 
 import { font } from '@weco/common/utils/classnames';
+import { iiifImageTemplate } from '@weco/common/utils/convert-image-uri';
 import LL from '@weco/common/views/components/styled/LL';
 import Space from '@weco/common/views/components/styled/Space';
 import { useUser } from '@weco/common/views/components/UserProvider/UserProvider';
@@ -78,6 +79,9 @@ const IIIFCanvasThumbnail: FunctionComponent<IIIFCanvasThumbnailProps> = ({
   const { user } = useUser();
   const role = user?.role;
   const isRestricted = canvas.hasRestrictedImage;
+  const urlTemplate = canvas.imageServiceId
+    ? iiifImageTemplate(canvas.imageServiceId)
+    : undefined;
 
   return (
     <IIIFViewerThumb>
@@ -97,7 +101,10 @@ const IIIFCanvasThumbnail: FunctionComponent<IIIFCanvasThumbnailProps> = ({
             <IIIFViewerImage
               highlightImage={highlightImage}
               width={canvas?.thumbnailImage?.width || 30}
-              src={canvas?.thumbnailImage?.url}
+              src={
+                canvas?.thumbnailImage?.url ||
+                (urlTemplate && urlTemplate({ size: '200,' }))
+              }
               srcSet=""
               sizes={`${canvas?.thumbnailImage?.width || 30}px`}
               alt=""