Nuxt 3, vue-datocms blured image not replaced by the final one

🆘 Support
1

The problem is that images stay blurred after initial load on Netlify, no problem on locale.
Visit my Netlify Deploy Preview

Here is my packages.json

  "devDependencies": {
    "@nuxt/image-edge": "^1.0.0-28020728.5df24eb",
    "nuxt": "3.3.2",
    "nuxt-delay-hydration": "1.1.4"
  },
  "dependencies": {
    "@datocms/nuxt-module": "^1.0.0-0",
    "@nuxt/schema": "^3.0.0",
    "@nuxtjs/i18n": "8.0.0-beta.4",
    "@nuxtjs/i18n-edge": "8.0.0-beta.4-27812700.b832f07",
    "@nuxtjs/robots": "^3.0.0",
    "date-fns": "^2.29.3",
    "jquery": "^3.6.1",
    "vue-datocms": "^4.0.5"
  }

Screenshot 2023-04-25 at 11.25.11 AM
Screenshot 2023-04-25 at 11.25.11 AM1342×975 120 KB

Not working on :
Netlify
Vercel

2

Hello @guillaume

Could you share with us the snippet of code where you are using <DatocmsImage /> as well as the snippet of code of your graphQL request where you request the info you plug into that component? If you can’t share those snippets here, please send them to us at support@datocms.com

3

Thanks @m.finamor, so here is my list_project.vue component :

<template>
  <div
    role="listitem"
    v-for="item in works.slice(0, 1)"
    v-bind:key="item.id"
    class="w-dyn-item"
  >
    <a href="#" class="work-card w-inline-block">
      <div class="work-image-large">
        <DatocmsImage
          :data="item.firstCover.responsiveImage"
          loading="lazy"
          :alt="item.title"
          class="work-image"
          v-bind:style="'height:auto'"
        />
      </div>
    </a>
  </div>
</template>

<script setup>
import { allWorksQuery } from "~/utils/graphql";

const { locale, locales } = useI18n();

const { data: pagesData } = await useGraphqlQuery({
  query: allWorksQuery,
  key: "allWorks",
  variables: { locale: locale },
});

const works = computed(() => pagesData.value?.allWorks);
</script>

in my graphql.ts file :

export const allWorksQuery = `
query ($locale: SiteLocale) {
  allWorks(first: 100, locale: $locale, filter: {actif: {eq: "true"}}) {
   id
   firstCover : coverImage {
      responsiveImage(imgixParams: {fit: fill, q: 40, auto: format, w: "1400"}) {
           ...imageFields
      }
   }
   slug
   }
 }
  fragment imageFields on ResponsiveImage {
    aspectRatio
    base64
    height
    sizes
    src
    srcSet
    webpSrcSet
    width
    alt
    title
    bgColor
  }
`;

My nuxt.config.ts file :


// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: true,
  nitro: {
    compressPublicAssets: true,
  },
  modules: [
    ['@nuxtjs/robots', {
      UserAgent: '*',
      Disallow: '/'
    }],
    '@nuxtjs/i18n',
    '@nuxt/image-edge',
    'nuxt-delay-hydration',
    '@datocms/nuxt-module',
  ],
  datocms: {
    datocmsReadOnlyToken: process.env.NUXT_ENV_DATOCMS_API_TOKEN
  },
  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing  
    debug: process.env.NODE_ENV === 'development',
    mode: 'mount'
  },
  runtimeConfig: {
    public: {
      datocmsReadOnlyToken: process.env.NUXT_ENV_DATOCMS_API_TOKEN,
      environment: process.env.NUXT_ENV_DATOCMS_ENVIRONMENT,
      endpoint: 'https://graphql.datocms.com',
    },
  },
});

My packages.json :

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate --trace-warnings",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/image-edge": "^1.0.0-28020728.5df24eb",
    "nuxt": "3.3.2",
    "nuxt-delay-hydration": "1.1.4"
  },
  "dependencies": {
    "vue-datocms": "^4.0.5",
    "@datocms/nuxt-module": "^1.0.0-0",
    "@nuxt/schema": "^3.0.0",
    "@nuxtjs/i18n": "8.0.0-beta.4",
    "@nuxtjs/i18n-edge": "8.0.0-beta.4-27812700.b832f07",
    "@nuxtjs/robots": "^3.0.0",
    "date-fns": "^2.29.3",
    "jquery": "^3.6.1"
  }
}

And finally the project link : Webflow NoCode Canadien Agency - Switch to Bauhem (644c15ba8b7a270008a06d36–bauhem-2024.netlify.app)

Thanks again!

4

Hello @guillaume , it seems like the rendering of the images for lazy loading is not being specified as through the props as documented here: vue-datocms/src/components/Image at master · datocms/vue-datocms · GitHub through the lazy-load prop, and is instead using loading="lazy"

5

Thanks, so after investigation, i found a plugin that break dato-image. I’ll find a fix.

1 Like