diff --git a/packages/browser/src/node/plugin.ts b/packages/browser/src/node/plugin.ts
index 14c216cfa1ff..56a9800d7f15 100644
--- a/packages/browser/src/node/plugin.ts
+++ b/packages/browser/src/node/plugin.ts
@@ -125,7 +125,15 @@ export default (browserServer: BrowserServer, base = '/'): Plugin[] => {
             }
 
             const url = new URL(req.url, 'http://localhost')
-            const file = url.searchParams.get('file')
+            const id = url.searchParams.get('id')
+            if (!id) {
+              res.statusCode = 404
+              res.end()
+              return
+            }
+
+            const task = project.ctx.state.idMap.get(id)
+            const file = task?.meta.failScreenshotPath
             if (!file) {
               res.statusCode = 404
               res.end()
diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
index 050e25635ce6..9472267cdf78 100644
--- a/packages/ui/client/components/views/ViewReport.vue
+++ b/packages/ui/client/components/views/ViewReport.vue
@@ -115,11 +115,11 @@ const showScreenshot = ref(false)
 const timestamp = ref(Date.now())
 const currentTask = ref<Task | undefined>()
 const currentScreenshotUrl = computed(() => {
-  const file = currentTask.value?.meta.failScreenshotPath
+  const id = currentTask.value?.id
   // force refresh
   const t = timestamp.value
   // browser plugin using /, change this if base can be modified
-  return file ? `/__screenshot-error?file=${encodeURIComponent(file)}&t=${t}` : undefined
+  return id ? `/__screenshot-error?id=${encodeURIComponent(id)}&t=${t}` : undefined
 })
 
 function showScreenshotModal(task: Task) {