Slicemachine + Storybook + Nuxt-image

[kolbykruger]

Hi all,

I am working on a project and just discovered nuxt-image which looks really compelling. I am using it currently in a slice via Slicemachine, and am having some trouble connecting it to Storybook to generate the screenshot.

Node: 14.16.0
Prismic CLI: 4.1.1

The image is set in Prismic in a slice, and is then using the <nuxt-img> component to render the image in different sizes, formats, etc.

The front-end works beautifully, however in Storybook, it seems to not pickup any of the url structure, and receives a broken image url. This does mean that for Slicemachine, the screenshot doesn't work as the image doesn't show up. The slice image path it generates is different from the one Storybook is receiving, so that could be the main issue.

Slice
https://images.prismic.io/kolby/a67f3a1e-151d-4f43-ac3b-cdf47f885878_meckl-antal-1270305-unsplash.jpg?auto=compress,format&rect=0,415,3988,2243&w=1920&h=1440

Storybook
https://images.prismic.io/photo-1504198070170-4ca53bb1c1fa?w=1920&h=1440&fit=crop

Here's what the slice looks like, it's pretty barebones:

<section class="banner-image">
        <div class="banner-image-container">
            <nuxt-img
                provider="prismic"
                v-if="slice.primary.image.url"
                :src="slice.primary.image.url"
                sizes="sm:200px, md:50px, lg:100vw, xl:100vw, xxl: 100vw"
            />
            <!-- <prismic-image :field="slice.primary.image" /> -->
        </div>
    </section>

I'm not sure if anyone has been able to get nuxt-image to work with Storybook yet, as browsing the Github issues, I haven't been able to find anything.

Any assistance is greatly appreciated!

Thanks!

[Phil (Phil Snow)]

Hi Kolby,

Good to see you.

This is due to Slice Machine generating mock images from Unsplash. The Nuxt Image Prismic plugin expects images to be served through our image CDN (images.prismic.io). So this leads to errors within Storybook.

To "patch" that you can provide an additional config to Prismic config on Nuxt image: baseURL and set it to Unsplash's one:

image: {
  prismic: {
    baseURL: "https://images.unsplash.com"
  }
}

However you cannot have a consistent fix that will work for both.

The plan for the future to work better with systems like nuxt-image, is to serve Slice Machine mocks images through Prismic official image CDN.

Thanks.

[kolbykruger]

Thanks so much for your response!

That makes total sense now. I look forward to the future improvements!

Thanks Phil!