fix: deleted image wrongfully caching

web/src/components/ArticleEditorImageNode.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
 import { articleImageId } from '@/lib/articleImage'
+import { mediaRevision, withMediaRevision } from '@/lib/mediaRevision'
 
 const props = defineProps(nodeViewProps)
 
@@ -20,6 +21,19 @@ const imageAttrs = computed(() => {
 	return { src, alt, title, width, height, 'data-image-id': props.node.attrs['data-image-id'] }
 })
 
+const failed = ref(false)
+const displayAttrs = computed(() => ({
+	...imageAttrs.value,
+	src: withMediaRevision(imageAttrs.value.src, mediaRevision.value),
+}))
+
+watch(
+	() => displayAttrs.value.src,
+	() => {
+		failed.value = false
+	},
+)
+
 function onDeleteClick() {
 	if (imageId.value === null) {
 		return
@@ -31,14 +45,29 @@ function onDeleteClick() {
 <template>
 	<NodeViewWrapper
 		as="div"
-		class="relative block w-fit"
-		:class="{ 'outline-2 outline-primary rounded-md': selected }"
+		class="relative block"
+		:class="[failed ? 'w-full' : 'w-fit', { 'outline-2 outline-primary rounded-md': selected }]"
 		data-testid="article-editor-image"
 		@dragstart.prevent
 	>
-		<img v-bind="imageAttrs" draggable="false" class="block max-w-full" />
+		<div
+			v-if="failed"
+			data-testid="article-editor-image-missing"
+			class="flex min-h-40 flex-col items-center justify-center gap-2 border border-dashed border-accented bg-elevated p-6 text-center font-sans text-sm text-muted"
+		>
+			<UIcon name="i-lucide-image-off" class="size-6" />
+			<span class="font-medium text-highlighted">This image is no longer available</span>
+			<span>It was deleted from the library. Remove it from the article.</span>
+		</div>
+		<img
+			v-else
+			v-bind="displayAttrs"
+			draggable="false"
+			class="block max-w-full"
+			@error="failed = true"
+		/>
 		<UButton
-			v-if="showDeleteButton"
+			v-if="showDeleteButton || (failed && imageId !== null)"
 			data-testid="remove-image-button"
 			icon="i-lucide-trash-2"
 			color="neutral"