diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 121234efea..5ee75b14a3 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -9,3 +9,4 @@ export { default as TestSlidingPanel } from './test-sliding-panel.vue';
 export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
+export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
diff --git a/packages/_vue3-migration-test/src/components/result/test-base-result-images.vue b/packages/_vue3-migration-test/src/components/result/test-base-result-images.vue
new file mode 100644
index 0000000000..c94f4eef55
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/result/test-base-result-images.vue
@@ -0,0 +1,21 @@
+<template>
+  <h1>BasePlaceholderImage</h1>
+  <BasePlaceholderImage class="staticClass" :class="{ class: true }" />
+  <h1>BaseFallbackImage</h1>
+  <BaseFallbackImage class="staticClass" :class="{ class: true }" />
+</template>
+
+<script setup lang="ts">
+  import BasePlaceholderImage from '../../../../x-components/src/components/result/base-result-placeholder-image.vue';
+  import BaseFallbackImage from '../../../../x-components/src/components/result/base-result-fallback-image.vue';
+</script>
+
+<style scoped>
+  .staticClass {
+    height: 300px;
+    width: 300px;
+  }
+  .class {
+    border: 1px solid green;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 5eb367255b..89dff78109 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -23,7 +23,8 @@ import {
   TestUseLayouts,
   TestSlidingPanel,
   TestBaseSuggestions,
-  TestHighlight
+  TestHighlight,
+  TestBaseResultImages
 } from './';
 
 const routes = [
@@ -146,6 +147,11 @@ const routes = [
     path: '/highlight',
     name: 'Highlight',
     component: TestHighlight
+  },
+  {
+    path: '/base-result-images',
+    name: 'BaseResultImages',
+    component: TestBaseResultImages
   }
 ];
 
diff --git a/packages/x-components/src/components/result/base-result-fallback-image.vue b/packages/x-components/src/components/result/base-result-fallback-image.vue
index 9b50cd8dc7..7ecb0971fa 100644
--- a/packages/x-components/src/components/result/base-result-fallback-image.vue
+++ b/packages/x-components/src/components/result/base-result-fallback-image.vue
@@ -1,6 +1,5 @@
-<template functional>
+<template>
   <svg
-    :class="[].concat(data.staticClass, data.class)"
     version="1.1"
     viewBox="0 0 256 371"
     xmlns="http://www.w3.org/2000/svg"
@@ -34,7 +33,3 @@
     ></path>
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>
diff --git a/packages/x-components/src/components/result/base-result-placeholder-image.vue b/packages/x-components/src/components/result/base-result-placeholder-image.vue
index b924970d9c..5f04249a9b 100644
--- a/packages/x-components/src/components/result/base-result-placeholder-image.vue
+++ b/packages/x-components/src/components/result/base-result-placeholder-image.vue
@@ -1,6 +1,5 @@
-<template functional>
+<template>
   <svg
-    :class="[].concat(data.staticClass, data.class)"
     version="1.1"
     viewBox="0 0 256 371"
     xmlns="http://www.w3.org/2000/svg"
@@ -47,7 +46,3 @@
     ></path>
   </svg>
 </template>
-
-<script lang="ts">
-  export default {};
-</script>