add nuxt image for lazyloading images

components/Navbar/UserLoggedIn.vue

@@ -15,9 +15,12 @@
       class="grid w-12 h-12 overflow-hidden border rounded-full aspect-square place-items-center"
     >
       <span class="sr-only">Profile</span>
-      <img
-        src="https://res.cloudinary.com/kuroji-fusky-s3/image/upload/q_75/projects/misc/ozzy-fp-banner.png"
+      <nuxt-img
+        provider="cloudinary"
+        src="/projects/misc/ozzy-fp-banner.png"
         alt="Profile"
+        width="50"
+        height="50"
       />
     </button>
   </div>

nuxt.config.ts

@@ -1,17 +1,11 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: [
-    "@nuxtjs/color-mode",
-    [
-      "@pinia/nuxt",
-      {
-        autoImports: ["defineStore", ["defineStore", "definePiniaStore"]],
-      },
-    ],
-  ],
   app: {
     head: {
       link: [
+        {
+          href: ",/favicon.ico",
+        },
         {
           rel: "manifest",
           href: "./manifest.json",
@@ -23,6 +17,17 @@ export default defineNuxtConfig({
       ],
     },
   },
+  // @ts-ignore
+  modules: [
+    "@nuxt/image-edge",
+    "@nuxtjs/color-mode",
+    [
+      "@pinia/nuxt",
+      {
+        autoImports: ["defineStore", ["defineStore", "definePiniaStore"]],
+      },
+    ],
+  ],
   build: {
     transpile: ["gsap"],
   },
@@ -40,4 +45,10 @@ export default defineNuxtConfig({
     shim: false,
     strict: true,
   },
+  // @nuxt/image-edge config
+  image: {
+    cloudinary: {
+      baseURL: "https://res.cloudinary.com/kuroji-fusky-s3/image/upload/",
+    },
+  },
 })

package.json

@@ -11,6 +11,7 @@
     "@fontsource/inter": "^4.5.14",
     "@fontsource/open-sans": "^4.5.14",
     "@iconify-prerendered/vue-fa6-brands": "^0.18.1662097805",
+    "@nuxt/image-edge": "^1.0.0-27919678.2f5b64b",
     "@nuxtjs/color-mode": "^3.2.0",
     "@pinia/nuxt": "^0.4.6",
     "autoprefixer": "^10.4.13",
@@ -21,4 +22,4 @@
     "sass": "^1.57.1",
     "tailwindcss": "^3.2.4"
   }
-}
+}