Nuxt•8mo ago

Nuxt Image in Nuxt Content Assets

Hello, Nuxt Content Assets author here. It seems that Nuxt Image has stopped working in Nuxt Content Assets. https://github.com/davestewart/nuxt-content-assets/issues/64 The previous version of Nuxt Content Asset (NCA) was actually using the Nuxt Image 1.0.0-rc, and Nuxt has also moved on a lot since last looking at it. Additionally, I think there were probably some shortcomings; my previous advice for folks was to change the config dir but that also prevented images in public from working in regular use. So I'm just attempting to get up to speed with the new module and find a way to make it load images from both .nuxt/content-assets/public and public. I've tinkering with a few test repos right now to properly understand NI, and I'm wondering if the right approach might be to create a custom provider for Nuxt Content Assets which would look in a different place:

// components/content/ProseImg.vue
<template>
  <nuxt-img provider="content" v-bind="$attrs" />
</template>

// components/content/ProseImg.vue
<template>
  <nuxt-img provider="content" v-bind="$attrs" />
</template>

I don't even know if this is possible, so this post is really just me trying to validate potential solutions if it can save me some time. I've had a play with useImage() but it seems to work only with the preconfigured folder (i.e. public):

// components/content/ProseImg.ts
import { h } from 'vue'
import { useImage } from '#imports'

export default function render () {
  const img = useImage()
  const src = img('splash.jpg', { width: 300, quality: 50 })
  return h('img', { src })
}

// components/content/ProseImg.ts
import { h } from 'vue'
import { useImage } from '#imports'

export default function render () {
  const img = useImage()
  const src = img('splash.jpg', { width: 300, quality: 50 })
  return h('img', { src })
}

Any direction welcome.

GitHub

404 when trying to locate image · Issue #64 · davestewart/nuxt-cont...

Background I just set up the module with the standard defaults, I have not provided any additional configuration. Issue I'm getting a 404 for the image when it's passed as a blog image src ...

4 Replies

davestewartOP•8mo ago

Digging a bit deeper, the notes in the Nuxt Image docs might give a clue to why this is so:

For ipxStatic provider, if images weren't crawled during generation (unreachable modals, pages or dynamic runtime size), changing dir from public causes 404 errors.

As such I ran an additional IPX server pointing at the directory I mention above and it does indeed serve the image:

npx ipx serve --dir ./.nuxt/content-assets/public

npx ipx serve --dir ./.nuxt/content-assets/public

http://localhost:3003/w_300&q_50/paths/same/italian-bean-stew.jpg

http://localhost:3003/w_300&q_50/paths/same/italian-bean-stew.jpg

Again, not sure if this is the right approach, but I'm assuming IPX is set up to only serve from one directory at a time, or the instance (createIPX) can only serve one folder at a time... so suspect I need to make a new IPX instance and run that separately: - https://github.com/nuxt/image/blob/main/src/runtime/ipx.ts If any Nuxt Image maintainers are around to point me in the right direction, I would appreciate it. cc @danielroe , @pi0 Thanks.

davestewartOP•8mo ago

A bit more digging around in the debugger and it seems that ipx already supports arrays via layers... so I think the quick and dirty solution might be to treat the hidden .nuxt/content-assets folder as a layer. Have done a quick test and it seems this works 😅

davestewartOP•8mo ago

Hmm. I can't seem to quite crack this in code. Is there a way to add layers programmatically? Right now I'm attempting to add the extends layer in the module setup, something like this:

    const config = nuxt.options._layers[0].config
    if (config) {
      if (!config.extends) {
        config.extends = []
      }
      config.extends.push('.nuxt/content-assets')
    }

    const config = nuxt.options._layers[0].config
    if (config) {
      if (!config.extends) {
        config.extends = []
      }
      config.extends.push('.nuxt/content-assets')
    }

At the same time I add the nuxt.config.ts file and the public folder. Clearly a bit hacky, and in Nuxt Image ipxSetup(), the layer is not appearing:

const publicDirs = nuxt.options._layers.map((layer) => { // layers length is 1 not 2

const publicDirs = nuxt.options._layers.map((layer) => { // layers length is 1 not 2

If I add a manual extends in nuxt.config.ts the layer shows in the ipx setup function, and Nuxt Image shows succesfully in the app. I could instruct users to do this manually, but I would love for it just to be transparent.

davestewartOP•8mo ago

For anyone else wondering if it can be done, apparently for now, it cannot: https://twitter.com/danielcroe/status/1779196430055334008

daniel roe 🇺🇦 (@danielcroe) on X

@dave_stewart We are in favour of a utility that has a similar effect though. (Most layer functionality can be implemented manually in modules.)

Twitter

Gaming

Programming

Nuxt Image in Nuxt Content Assets