Working with Unsplash images with Nuxt/Image in Slice Simulator

Developing with Prismic
1

If you're trying to use the new <NuxtImg> component with the prismic provider, the unsplash images (used as mock data in slice simulator, but also as an option from slice machine) won't show. This is because they're being optimised as if they were on the Prismic CDN.

I made an issue on Github and created a custom provider that works around this issue. If people need this: Prismic provider doesn't play well with Unsplash urls from Prismic API · Issue #1172 · nuxt/image · GitHub

The Prismic team could also upgrade the prismic provider as a more permanent solution.

2

Hi Glenn,

You should be using the Prismic Image component provided by the @prismic/nuxt package.
<prismic-image :field="document.data.example_image" />

This will solve your issue for all Prismic images and is recommended in the code snippets of Slice Machine.

Thanks.

3

Correct me if I'm mistaken, but the <prismic-image> solution doesn't support responsive sizes nor automatic placeholder images (blurhash/LQIP). I was looking at Nuxt/Image to use these features.

5

prismic-image does support responsive images and you can apply styles like blur to the imgix URLs: