Fix: server fails to load SVG outputs when user has "Preview Format" setting specified (#3734)

src/stores/imagePreviewStore.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 
 import { ExecutedWsMessage, ResultItem } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 import { parseFilePath } from '@/utils/formatUtil'
 import { isVideoNode } from '@/utils/litegraphUtil'
 
@@ -17,11 +18,6 @@ const createOutputs = (
   }
 }
 
-const getPreviewParam = (node: LGraphNode): string => {
-  if (node.animatedImages || isVideoNode(node)) return ''
-  return app.getPreviewFormatParam()
-}
-
 export const useNodeOutputStore = defineStore('nodeOutput', () => {
   const getNodeId = (node: LGraphNode): string => node.id.toString()
 
@@ -35,6 +31,41 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     return app.nodePreviewImages[getNodeId(node)]
   }
 
+  /**
+   * Check if a node's outputs includes images that should/can be loaded normally
+   * by PIL.
+   */
+  const isImageOutputs = (
+    node: LGraphNode,
+    outputs: ExecutedWsMessage['output']
+  ): boolean => {
+    // If animated webp/png or video outputs, return false
+    if (node.animatedImages || isVideoNode(node)) return false
+
+    // If no images, return false
+    if (!outputs?.images?.length) return false
+
+    // If svg images, return false
+    if (outputs.images.some((image) => image.filename?.endsWith('svg')))
+      return false
+
+    return true
+  }
+
+  /**
+   * Get the preview param for the node's outputs.
+   *
+   * If the output is an image, use the user's preferred format (from settings).
+   * For non-image outputs, return an empty string, as including the preview param
+   * will force the server to load the output file as an image.
+   */
+  function getPreviewParam(
+    node: LGraphNode,
+    outputs: ExecutedWsMessage['output']
+  ): string {
+    return isImageOutputs(node, outputs) ? app.getPreviewFormatParam() : ''
+  }
+
   function getNodeImageUrls(node: LGraphNode): string[] | undefined {
     const previews = getNodePreviews(node)
     if (previews?.length) return previews
@@ -43,7 +74,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     if (!outputs?.images?.length) return
 
     const rand = app.getRandParam()
-    const previewParam = getPreviewParam(node)
+    const previewParam = getPreviewParam(node, outputs)
 
     return outputs.images.map((image) => {
       const imgUrlPart = new URLSearchParams(image)
@@ -78,6 +109,7 @@ export const useNodeOutputStore = defineStore('nodeOutput', () => {
     getNodeOutputs,
     getNodeImageUrls,
     getNodePreviews,
-    setNodeOutputs
+    setNodeOutputs,
+    getPreviewParam
   }
 })