diff --git a/docs/guide/essentials/assets.md b/docs/guide/essentials/assets.md
index 4ca40fca7..00f87b06b 100644
--- a/docs/guide/essentials/assets.md
+++ b/docs/guide/essentials/assets.md
@@ -16,7 +16,8 @@ img.src = imageUrl;
 ```
 
 ```html [HTML]
-<img src="~/assets/image.png" />
+<!-- In HTML tags, you must use the relative path --->
+<img src="../assets/image.png" />
 ```
 
 ```css [CSS]
@@ -25,6 +26,22 @@ img.src = imageUrl;
 }
 ```
 
+```vue [Vue]
+<script>
+import image from '~/assets/image.png';
+</script>
+
+<template>
+  <img :src="image" />
+</template>
+```
+
+```jsx [JSX]
+import image from '~/assets/image.png';
+
+<img src={image} />;
+```
+
 :::
 
 ## `/public` Directory
@@ -52,6 +69,16 @@ img.src = imageUrl;
 }
 ```
 
+```vue [Vue]
+<template>
+  <img src="/image.png" />
+</template>
+```
+
+```jsx [JSX]
+<img src="/image.png" />
+```
+
 :::
 
 ## Inside Content Scripts
@@ -114,7 +141,7 @@ export default defineConfig({
   manifest: {
     web_accessible_resources: [
       {
-        // We'll use this matches in the cotent script as well
+        // We'll use this matches in the content script as well
         matches: ['*://*.github.com/*'],
         // Use the same path as `relativeDest` from the WXT module
         resources: ['/oxc_parser_wasm_bg.wasm'],