diff --git a/frontend/config/vite.config.dev.ts b/frontend/config/vite.config.dev.ts
index 5a86a4c461..7ead8b015c 100644
--- a/frontend/config/vite.config.dev.ts
+++ b/frontend/config/vite.config.dev.ts
@@ -41,6 +41,11 @@ export default mergeConfig(
           changeOrigin: true,
           rewrite: (path: string) => path.replace(/^\/front\/bug\/attachment/, ''),
         },
+        '/test-plan/report': {
+          target: process.env.VITE_DEV_DOMAIN,
+          changeOrigin: true,
+          rewrite: (path: string) => path.replace(/^\/front\/test-plan\/report/, ''),
+        },
         '/plugin/image': {
           target: process.env.VITE_DEV_DOMAIN,
           changeOrigin: true,
diff --git a/frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue b/frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue
index aa362e62cc..4224435da0 100644
--- a/frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue
+++ b/frontend/src/views/test-plan/report/detail/component/custom-card/customRichText.vue
@@ -21,6 +21,7 @@
       v-model:raw="innerTextForm.content"
       v-model:filedIds="innerTextForm.richTextTmpFileIds"
       :upload-image="handleUploadImage"
+      :preview-url="ReportPlanPreviewImageUrl"
       class="mt-[8px] w-full"
       :editable="props.canEdit"
       @click="handleClick"
@@ -41,6 +42,7 @@
   import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
 
   import { editorUploadFile } from '@/api/modules/test-plan/report';
+  import { ReportPlanPreviewImageUrl } from '@/api/requrls/test-plan/report';
   import useDoubleClick from '@/hooks/useDoubleClick';
   import { useI18n } from '@/hooks/useI18n';
   import { hasAnyPermission } from '@/utils/permission';
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
index a819f3bc68..93c0968971 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/apiAndScenarioTable.vue
@@ -186,12 +186,18 @@
     }
   }
 
-  onMounted(() => {
-    if (props.reportId && props.isPreview) {
-      currentCaseTable.value.resetPagination();
-      loadCaseList();
-    } else {
-      currentCaseTable.value.propsRes.value.data = detailTableExample[props.activeType];
+  watch(
+    [() => props.reportId, () => props.isPreview],
+    () => {
+      if (props.reportId && props.isPreview) {
+        currentCaseTable.value.resetPagination();
+        loadCaseList();
+      } else {
+        currentCaseTable.value.propsRes.value.data = detailTableExample[props.activeType];
+      }
+    },
+    {
+      immediate: true,
     }
-  });
+  );
 </script>
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/bugTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/bugTable.vue
index a8707e8d80..5a4938fcd5 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/bugTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/bugTable.vue
@@ -84,11 +84,17 @@
     loadList();
   }
 
-  onMounted(() => {
-    if (props.reportId && props.isPreview) {
-      loadCaseList();
-    } else {
-      propsRes.value.data = detailTableExample[ReportCardTypeEnum.BUG_DETAIL];
+  watch(
+    [() => props.reportId, () => props.isPreview],
+    () => {
+      if (props.reportId && props.isPreview) {
+        loadCaseList();
+      } else {
+        propsRes.value.data = detailTableExample[ReportCardTypeEnum.BUG_DETAIL];
+      }
+    },
+    {
+      immediate: true,
     }
-  });
+  );
 </script>
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
index 8183dc800e..cda2d1960f 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/featureCaseTable.vue
@@ -163,13 +163,19 @@
     loadList();
   }
 
-  onMounted(() => {
-    if (props.reportId && props.isPreview) {
-      loadCaseList();
-    } else {
-      propsRes.value.data = detailTableExample[ReportCardTypeEnum.FUNCTIONAL_DETAIL];
+  watch(
+    [() => props.reportId, () => props.isPreview],
+    () => {
+      if (props.reportId && props.isPreview) {
+        loadCaseList();
+      } else {
+        propsRes.value.data = detailTableExample[ReportCardTypeEnum.FUNCTIONAL_DETAIL];
+      }
+    },
+    {
+      immediate: true,
     }
-  });
+  );
 
   const showDetailVisible = ref<boolean>(false);
 
diff --git a/frontend/src/views/test-plan/report/detail/component/system-card/reportDetailTable.vue b/frontend/src/views/test-plan/report/detail/component/system-card/reportDetailTable.vue
index b6c53a8f9c..ff443073da 100644
--- a/frontend/src/views/test-plan/report/detail/component/system-card/reportDetailTable.vue
+++ b/frontend/src/views/test-plan/report/detail/component/system-card/reportDetailTable.vue
@@ -143,13 +143,19 @@
     loadList();
   }
 
-  onMounted(() => {
-    if (props.reportId && props.isPreview) {
-      loadReportDetailList();
-    } else {
-      propsRes.value.data = detailTableExample[ReportCardTypeEnum.SUB_PLAN_DETAIL];
+  watch(
+    [() => props.reportId, () => props.isPreview],
+    () => {
+      if (props.reportId && props.isPreview) {
+        loadReportDetailList();
+      } else {
+        propsRes.value.data = detailTableExample[ReportCardTypeEnum.SUB_PLAN_DETAIL];
+      }
+    },
+    {
+      immediate: true,
     }
-  });
+  );
 
   const reportVisible = ref(false);