nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.36k stars 273 forks source link

404 error page image not rehydrating properly #249

Open shadow81627 opened 3 years ago

shadow81627 commented 3 years ago

On local dev (npm run dev) my 404 page is returning this error: localhost_3000_test

 ERROR  [Vue warn]: Error in render: "TypeError: Cannot read property '_img' of undefined"                                  14:55:22

found in

---> <404> at components/error/404.vue
       <Error> at layouts/error.vue
         <Nuxt>
           <VMain>
             <VApp>
               <Layouts/default.vue> at layouts/default.vue
                 <Root>

In a static generated production environment on vercel the image is pointing to the original static file.

Vercel preview Code

Similar issue to #234

pi0 commented 3 years ago

Hi @shadow81627. Would you please try 0.4.9 if it fixes your issue?

shadow81627 commented 3 years ago

The update has fixed the 404 page in my preview but when I run npm run generate npm run start I get an error.

TypeError: input must be a string (received undefined: undefined)

localhost_3000_404

My lighthouse CI check is failing on the 404 page with

total-byte-weight failure for minScore assertion
       Avoid enormous network payloads
tho-masn commented 3 years ago

I'm getting the same error using @nuxt/image 0.4.12, nuxt 2.15.6. I've tried different configurations (target static and server - with and without ssr). The result is always the same. Loading pages which includes the nuxt-img tag results in the following two errors:

[Vue warn]: Missing required prop: "src" [Vue warn]: Error in render: "TypeError: input must be a string (received undefined: undefined)"

Any ideas why this is happening? img tags are working.

genitutors commented 3 years ago

I face the same issue despite not have nuxt-lazy-loader installed at all. I use vuetify and whenever I reload the page, the image appears and the error disappears. However, clicking the link to the image page from another webpage will return the error