Nuxt Image + Prismic Usage

[BenjaminOddou]

Hello 👋,

I tried to set up prismic "@nuxtjs/prismic": "^3.0.0-rc.0" with "@nuxt/image-edge": "^1.0.0-27657146.da85542" but it doesn't seems to work at all. My nuxt.config.ts file :

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  modules: [
    '@nuxt/image-edge',
    '@nuxtjs/prismic'
  ],
  prismic: {
    endpoint: 'my-repo-Id,
    preview: false,
    toolbar: true
  },
  image: {
    provider: 'prismic',
    domains: ['prismic.io']
  }
})

and in the my .vue files :

<template>
          <nuxt-picture
            src="/c-1-910w.webp"
            width="910"
            height="1365"
            sizes="sm:518px, 2xl:910px"
            :img-attrs="{
              class: 'img-unit',
              alt: `Alternative text`
            }"
          />
</template>

[lihbr]

Hey there,

Looks like you're trying to use a local image with Nuxt Image Prismic provider set as the default provider.

In such case I think you need to specify an explicit provider:

<nuxt-picture
    provider="ipx"
    src="/c-1-910w.webp"
    width="910"
    height="1365"
    sizes="sm:518px, 2xl:910px"
    :img-attrs="{
        class: 'img-unit',
        alt: `Alternative text`
    }"
/>

Let me know :)

[BenjaminOddou]

Hello @lihbr,

In fact I am trying to use prismic images directly but maybe my configuration is not correct. 🤔

[lihbr]

Sure, my bad!

In this case, you'll need to provide your image field's URL as the src, something like this:

<nuxt-picture
    :src="doc.data.my_image.url"
    width="910"
    height="1365"
    sizes="sm:518px, 2xl:910px"
    :img-attrs="{
        class: 'img-unit',
        alt: `Alternative text`
    }"
/>

If that doesn't work, can you provide more information about what's happening? What's in your template, what's getting rendered, any messages, errors in the console, etc.

[BenjaminOddou]

hello @lihbr,

with the following configuration

          <nuxt-picture
            src="/c-1-910w.webp"
            width="910"
            height="1365"
            sizes="sm:518px, 2xl:910px"
            :img-attrs="{
              class: 'img-unit',
              alt: `Alternative text`
            }"
          />

I have this error message

GET https://images.prismic.io/c-1-910w.webp?fm=webp&fit=crop&q=80&loading=lazy&w=910&h=1365 [HTTP/2 404 Not Found 279ms]  

and with your suggestion, TS is throwing me Property 'doc' doesn't exist for the type ComponentInternalInstance and VUE is throwing me errors as well Parsing error: ',' expected..

I was wondering if there is nothing to change in my nuxt.config.ts file or something to enable with prismic. I mean is there any token/security stuff to manage in order to access images ?

[BenjaminOddou]

@lihbr,

After digging a bit I found that there is two things missing in the generated URLs.

what I should have :

https://images.prismic.io/<REPO NAME>/<ID OF IMAGE>_c-1-910w.webp?fm=webp&fit=crop&q=80&loading=lazy&w=910&h=1365

Also is there a secure way to call these images ? I know that there is a way to generate acess tokens but how to use them in this kind of config ?

[lihbr]

OK, thanks for providing more info!

When using Nuxt image with Prismic you cannot use only an image name. That's because the component cannot guess your repository name and image hash (ID) as you noticed.

To use Nuxt image with Prismic you need to pass it the full image URL served by Prismic available in Prismic image fields returned by the API.

Here's a tutorial about using Nuxt Image with Prismic: https://prismic.io/blog/nuxt-image-is-out-so-is-its-prismic-integration, it's relying on Nuxt 2 integration but the logic should remain the same.

Also is there a secure way to call these images ? I know that there is a way to generate acess tokens but how to use them in this kind of config ?

Unfortunately signing assets is not available on images served by Prismic. It is a feature of imgix, our image provider, but it is not made available as of writing this, I'll forward your feedback :)

[BenjaminOddou]

@lihbr,

So if I am understanding correctly, I have to provide the repo-name + hash for each image. Is there a way to dynamically define these urls? If I have 100 images in a gallery do I have to search for each hash manually, copy and paste it into each src fields ??

I can see in your demo that you added :

<nuxt-img v-if="item.image.url" :src="item.image.url" />

But I don't understand this piece of code 😅

[lihbr]

So if I am understanding correctly, I have to provide the repo-name + hash for each image.

No you don't have to, generally, you're not expected to grab image URLs from your library directly (you can, but it'd be manual then)

To automate it, the flow goes like this (this is a rough outline of it, check out the Prismic doc for a comprehensive tutorial):

1. You define your content type on Prismic, some may feature image fields
2. You create documents with these content types
3. You query them with Nuxt (example with Nuxt 3)
4. Then inside your template, you can feed image field's URLs from your documents to Nuxt Image like in the snippet you quoted:

<nuxt-img v-if="item.image.url" :src="item.image.url" />

This snippet basically checks if the image field is filled (available) by checking for a truthy url property, if so, it displays the component and provides it with the said url property to display the image.

---

However, the above flow I described is the flow you'd have with a CMS like Prismic. If you wish to just manage images (saying, for a photo gallery), you could use Imgix directly (or other image CDN available out there, Cloudinary, Twicpics, etc.). These would allow you to query all your image available on your library and to display them on your website.

[BenjaminOddou]

@lihbr , thank you for this precision!

However may I ask you if slicemachine is needed for this ? Because it's not working with Nuxt 3 for now.

✔ Project configured! Ready to start
⠏ Installing Slice MachineError! Command failed: npm install --save @nuxtjs/prismic @prismicio/slice-simulator-vue

[lihbr]

Slice is not "needed" indeed, and does not support Nuxt 3 officially yet indeed (you'd have to hack your way around to get it to work with Nuxt 3). With that in mind, I'd recommend sticking to the classic custom-type editor available online for now in that use case.

[BenjaminOddou]

Hello @lihbr

Sorry for requiring your help again but I am really struggling with the module. I am getting this error (testing my build locally):

GEThttps://<REPO_NAME>.cdn.prismic.io/api/v2 [HTTP/2 401 Unauthorized 471ms]

[lihbr]

It looks like you didn't replace <REPO_NAME> with your own Prismic repository name here.

Which tutorial did you follow?

[BenjaminOddou]

I followed this guide. I set up my repo name/Id in the nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
modules: ['@nuxtjs/prismic', '@nuxt/image-edge'],
prismic: { endpoint: 'my_repo_id' },
image: {
  provider: 'prismic',
  prismic: {}
}
})

[lihbr]

Alright, I'm sorry but I just don't have enough information to help you past that point.

Please provide a comprehensive reproduction as a .zip folder in that thread and explain clearly the error(s) you are experiencing.

[lihbr]

Closing as stale, feel free to reopen if you'd like to continue the troubleshooting process.