fix: image rendering with Nuxt Image RC

Qiskit · Jul 28, 2023 · 277332b · 277332b
1 parent 1f1cb67
commit 277332b
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 26 deletions.
diff --git a/components/LearnCourse/LearnCoursePages.vue b/components/LearnCourse/LearnCoursePages.vue
@@ -30,17 +30,12 @@
       </div>
       <div v-if="activeCourse" class="learn-course-pages__content__preview">
         <UiLink :url="activeCourse.url">
-          <!-- TODO: investigate why this particular img is not being populated -->
-          <!-- <nuxt-img
+          <nuxt-img
             class="learn-course-pages__content__preview__image"
             format="webp"
             preload
             sizes="md:650px lg:500px xl:750px"
             :src="activeCoursePreviewImage"
-          /> -->
-          <img
-            class="learn-course-pages__content__preview__image"
-            :src="activeCoursePreviewImage"
           />
         </UiLink>
         <UiCta

diff --git a/components/Ui/UiCard.vue b/components/Ui/UiCard.vue
@@ -7,20 +7,13 @@
     }"
   >
     <div v-if="image" class="card__image-container">
-      <!-- TODO: investigate why this particular img is not being populated in past Events tab-->
-      <!-- <nuxt-img
+      <nuxt-img
         class="card__image"
         :class="imageContain ? 'card__image_contain' : null"
         format="webp"
         loading="lazy"
         sizes="sm:300px md:650px"
         :src="image"
-      /> -->
-      <img
-        class="card__image"
-        :alt="altText"
-        :class="imageContain ? 'card__image_contain' : null"
-        :src="image"
       />
     </div>
     <div class="card__content">

diff --git a/error.vue b/error.vue
@@ -18,7 +18,7 @@
             />
           </div>
           <div class="cds--col-lg-8">
-            <img
+            <nuxt-img
               class="error-page__img"
               :src="errorImgSrc"
               alt="Playful illustration of a cat in a cardboard box"

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -9,7 +9,7 @@ const IS_PRODUCTION = NODE_ENV === "production";
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ["@nuxt/content", "@nuxt/image-edge", "nuxt-schema-org"],
+  modules: ["@nuxt/content", "@nuxt/image", "nuxt-schema-org"],
 
   schemaOrg: {
     host: "https://qiskit.org",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@carbon/web-components": "^1.28.0",
     "@ibm/plex": "^6.3.0",
     "@nuxt/content": "^2.6.0",
-    "@nuxt/image-edge": "^1.0.0-28101255.bece998",
+    "@nuxt/image": "^1.0.0-rc.1",
     "@nuxt/test-utils": "^3.6.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@qiskit/web-components": "^0.15.2",