Nuxt image

Author: w3bdesign

components/Index/IndexHero.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <img
+    <nuxt-img
       class="mx-auto"
       alt="Image slider slide #1"
-      src="~assets/images/Hero.jpg"
+      src="/images/Hero.jpg"
     />
     <div
       class="flex flex-col items-start justify-center w-full mx-auto tracking-wide lg:w-1/2"

components/Layout/LayoutCart.vue

@@ -13,11 +13,11 @@
             class="text-xl text-white no-underline lg:text-black is-active"
           >
             <span class="hidden lg:block">
-              <img
+              <nuxt-img
                 alt="Cart icon"
                 class="h-12 ml-4 lg:ml-2"
                 aria-label="Cart"
-                src="~/assets/svg/Cart.svg"
+                src="/svg/Cart.svg"
               />
             </span>
             <span class="block lg:hidden">

components/Layout/LayoutNavbar.vue

@@ -6,11 +6,11 @@
     <div class="flex flex-wrap lg:px-4">
       <div class="w-9/12 pr-2 my-2 overflow-hidden lg:w-3/12 md:w-10/12">
         <div class="ml-4 lg:ml-0">
-          <img
+          <nuxt-img
             alt="Logo"
             class="h-20 lg:h-24"
             aria-label="Nettbutikk logo"
-            src="~/assets/svg/Logo.svg"
+            src="/svg/Logo.svg"
           />
         </div>
       </div>

components/Products/ProductImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <img
+  <nuxt-img
     id="product-image"
     class="h-auto p-8 transition duration-500 ease-in-out transform md:p-0 hover:shadow-lg hover:scale-95"
     :alt="alt"

nuxt.config.js

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     "@formkit/nuxt",
     "@nuxtjs/algolia",
     "nuxt-icon",
+    "@nuxt/image",
   ],
   plugins: ["~/plugins/apollo"],
   runtimeConfig: {