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.
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!