diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 244eb4f..6f67fe0 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -1,27 +1,34 @@
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "app:dev",
-			"problemMatcher": [],
-			"label": "App: Development server",
-			"detail": "nuxt dev"
-		},
-		{
-			"type": "npm",
-			"script": "app:build",
-			"group": "build",
-			"problemMatcher": [],
-			"label": "App: Build",
-			"detail": "nuxt build"
-		},
-		{
-			"type": "npm",
-			"script": "app:analyze",
-			"problemMatcher": [],
-			"label": "App: Analyze",
-			"detail": "nuxi analyze"
-		}
-	]
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "app:dev",
+      "problemMatcher": [],
+      "label": "App: Development server",
+      "detail": "nuxt dev"
+    },
+    {
+      "type": "npm",
+      "script": "app:build",
+      "group": "build",
+      "problemMatcher": [],
+      "label": "App: Build",
+      "detail": "nuxt build"
+    },
+    {
+      "type": "npm",
+      "script": "app:analyze",
+      "problemMatcher": [],
+      "label": "App: Analyze",
+      "detail": "nuxi analyze"
+    },
+    {
+      "type": "shell",
+      "command": "npx eslint --fix ${file}",
+      "problemMatcher": [],
+      "label": "lint current file",
+      "detail": "eslint --fix"
+    }
+  ]
 }
diff --git a/components/content/prose-img.vue b/components/content/prose-img.vue
index 8524607..a3e3e4a 100644
--- a/components/content/prose-img.vue
+++ b/components/content/prose-img.vue
@@ -4,8 +4,12 @@
     :alt="alt"
     format="webp"
     lazy
+    tabindex="0"
     class="post-content-image"
     @click="showZoomPreview"
+    @focus="isFocused = true"
+    @blur="isFocused = false"
+    @keyup.space="handleSpaceKeyDown"
   />
 </template>
 
@@ -26,7 +30,43 @@ const fullpath = computed(() => {
 });
 
 const showZoomPreview = () => {
-  isZoomFeatureEnabled && imageZoom.show("image", fullpath.value) ;
+  if (isZoomFeatureEnabled) {
+    imageZoom.show("image", fullpath.value);
+    isZoomed.value = true;
+  }
+};
+
+const hideZoomPreview = () => {
+  if (isZoomFeatureEnabled) {
+    imageZoom.hide();
+    isZoomed.value = false;
+  }
+};
+
+// opening img by space key
+const isFocused = ref(false);
+const isZoomed = ref(false);
+
+const disableSpaceScroll = (event: KeyboardEvent) => {
+  if (event.code === "Space") {
+    event.preventDefault();
+  }
+};
+
+watch(isFocused, () => {
+  if (isFocused.value) {
+    document.addEventListener("keydown", disableSpaceScroll);
+    return;
+  }
+  document.removeEventListener("keydown", disableSpaceScroll);
+});
+
+const handleSpaceKeyDown = () => {
+  if (isZoomed.value) {
+    hideZoomPreview();
+    return;
+  }
+  showZoomPreview();
 };
 </script>