templates: add cache tag to images so that they can be revalidated along with the page on website templates (#10647)

Previously images would not be revalidated if they were cropped or
changed in another ways.

Now if the image is updated, they will also be updated on the frontend
whenever a post is revalidated.

Author: paulpopus

templates/website/src/components/Media/ImageMedia/index.tsx

@@ -47,7 +47,9 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
     height = fullHeight!
     alt = altFromResource || ''
 
-    src = `${getClientSideURL()}${url}`
+    const cacheTag = resource.updatedAt
+
+    src = `${getClientSideURL()}${url}?${cacheTag}`
   }
 
   const loading = loadingFromProps || (!priority ? 'lazy' : undefined)

templates/with-vercel-website/src/components/Media/ImageMedia/index.tsx

@@ -47,7 +47,9 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
     height = fullHeight!
     alt = altFromResource || ''
 
-    src = `${getClientSideURL()}${url}`
+    const cacheTag = resource.updatedAt
+
+    src = `${getClientSideURL()}${url}?${cacheTag}`
   }
 
   const loading = loadingFromProps || (!priority ? 'lazy' : undefined)