N

Nuxt•12mo ago•

19 replies

Jordan

Using NuxtContenet With NuxtImage On a Static Site

Hi there,

I am struggling to get NuxtImage to work with my usage of NuxtContent.

Basically, I have a directory of json files which is being processed by NuxtContent. I am using

queryContent

queryContent

to fetch the contents of those json files so I can loop over them on my page. One of the properties on my content schema is called

image

image

, which is just the path the image that needs to get used for that item.

I am running into an issue NuxtImage cannot see that I have these image paths in my content json, so it's not processing them when building the site statically, causing 404 errors in production. I think this is because when the site is generated statically, the api calls to nuxt content are still only run on the client side and not run before hand during static site generation.

Is it possible to either:

1 - Have my nuxt site completely prerender everything, including client site data request to NuxtContent. Currently I am running

npm run generate

npm run generate

to build the site.
2 - Tell nuxt image to process the images manually during the static build process. I already tried the option described in the nuxt image docs but it did not end up working.

Any assistance is much appreciated!

Nuxt Image

Static Images - Nuxt Image

Optimizing images for static websites.