From 3a06bedfdecbac4a28c3af13185fa8948294c0d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 4 Jun 2024 12:58:09 +0200
Subject: [PATCH] docs: update serve example

resolves #136
---
 docs/content/1.docs/2.storage/3.blob.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/content/1.docs/2.storage/3.blob.md b/docs/content/1.docs/2.storage/3.blob.md
index 7a048c28..25a8568d 100644
--- a/docs/content/1.docs/2.storage/3.blob.md
+++ b/docs/content/1.docs/2.storage/3.blob.md
@@ -61,13 +61,21 @@ Returns [`BlobListResult`](#bloblistresult).
 
 Returns a blob's data.
 
-```ts [server/api/files/[...pathname\\].get.ts]
+
+::code-group
+```ts [server/routes/images/[...pathname\\].get.ts]
 export default eventHandler(async (event) => {
   const { pathname } = getRouterParams(event)
 
   return hubBlob().serve(event, pathname)
 })
 ```
+```vue [pages/index.vue]
+<template>
+  <img src="/images/my-image.jpg">
+</template>
+```
+::
 
 #### Params
 
@@ -84,14 +92,6 @@ export default eventHandler(async (event) => {
 
 Returns the blob's raw data and sets `Content-Type` and `Content-Length` headers.
 
-::callout{icon="i-heroicons-information-circle" class="prose-code:bg-gray-50 dark:prose-code:bg-gray-800"}
-If you are fetching an image with a server route similar to the one above, you might simply want to use it this way:
-<br>
-```vue
-<img :src="`/api/blob/${file.pathname}`">
-```
-::
-
 ### `head()`
 
 Returns a blob's metadata.