Nuxt•2y 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

1.0.0-rc

1.0.0-rc

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

dir

dir

dir but that also prevented images in

public

public

public

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

.nuxt/content-assets/public

.nuxt/content-assets/public

.nuxt/content-assets/public and

public

public

public

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>

// 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()

useImage()

useImage()

useImage() but it seems to work only with the preconfigured folder (i.e.

public

public

public

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 })
}

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

Nuxt Image in Nuxt Content Assets

Similar Threads

Similar Threads

Similar Threads