diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 85c7a5666..22c902c6f 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -4,6 +4,9 @@ export default defineNuxtConfig({
   buildModules: [
     '../src/module'
   ],
+  imports: {
+    autoImport: false
+  },
   image: {
     domains: [
       'https://nuxtjs.org',
diff --git a/playground/pages/bg.vue b/playground/pages/bg.vue
index 0b18c52c9..11f0a01e1 100644
--- a/playground/pages/bg.vue
+++ b/playground/pages/bg.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script lang="ts" setup>
+import { useImage, computed } from '#imports'
+
 const $img = useImage()
 
 const bg = computed(() => {
diff --git a/src/runtime/components/nuxt-img.ts b/src/runtime/components/nuxt-img.ts
index ec6f46cbb..13bff96fe 100644
--- a/src/runtime/components/nuxt-img.ts
+++ b/src/runtime/components/nuxt-img.ts
@@ -1,4 +1,4 @@
-import { h, defineComponent } from 'vue'
+import { h, defineComponent, ref, computed, onMounted } from 'vue'
 import { useImage } from '../composables'
 import { parseSize } from '../utils'
 import { baseImageProps, useBaseImage } from './_base'
diff --git a/src/runtime/components/nuxt-picture.ts b/src/runtime/components/nuxt-picture.ts
index 7983f3c56..8b75b678e 100644
--- a/src/runtime/components/nuxt-picture.ts
+++ b/src/runtime/components/nuxt-picture.ts
@@ -1,6 +1,6 @@
-import { h, defineComponent } from 'vue'
+import { h, defineComponent, computed } from 'vue'
 import { useBaseImage, baseImageProps } from './_base'
-import { useHead } from '#imports'
+import { useImage, useHead } from '#imports'
 import { getFileExtension } from '#image'
 
 export const pictureProps = {
diff --git a/src/runtime/composables.ts b/src/runtime/composables.ts
index ee4852606..e420af28c 100644
--- a/src/runtime/composables.ts
+++ b/src/runtime/composables.ts
@@ -1,3 +1,5 @@
+import { useNuxtApp } from '#imports'
+
 export const useImage = () => {
   return useNuxtApp().$img
 }