Directus provider not working

[BorisKamp]

Hi!

Using "@nuxt/image": "^1.7.0" and"nuxt": "^3.12.4", I have the following setup for nuxt image: nuxt.config.ts`:

  modules: [
    ...
    '@nuxt/image',
    ...
  ],
  image: {
    directus: {
      baseUrl: 'http://localhost:8055/assets/',
    },
  },
....

A page with the following content:

<script lang="ts" setup>
</script>

<template>
  <div class="flex min-h-screen flex-1">
    <div class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
      <div class="mx-auto w-full max-w-sm lg:w-96">
        <slot />
      </div>
    </div>
    <div class="relative hidden w-0 flex-1 lg:block">
      <NuxtImg
        provider="directus"
        src="45200248-cebf-4d57-b7f5-aee8f2351289"
        class="absolute inset-0 h-full w-full object-cover"
      />
    </div>
  </div>
  <TailwindIndicator />
</template>

However, when I view the frontend I get the following error: GET http://localhost:3000/45200248-cebf-4d57-b7f5-aee8f2351289 404 (Page not found: /45200248-cebf-4d57-b7f5-aee8f2351289) and [Vue Router warn]: No match found for location with path "/45200248-cebf-4d57-b7f5-aee8f2351289"

The file is there, when I view http://localhost:8055/assets/45200248-cebf-4d57-b7f5-aee8f2351289.jpeg in my browser it shows the file.....

Whats up here?

[Max-Kucher]

I have the same error when using strapi:

nuxt.config.js

 ...
  image: {
    format: ['avif'],
    providers: {
      strapi: {
        baseURL: process.env.NUXT_ENV_SITE_BACKEND_URL, // Has http://127.0.0.1 value
      },
    },
  },
  ...

But my NuxtPicture, NuxtImg and useImage still generates: http://localhost:1337/uploads/image.jpg

[BorisKamp]

Hi guys!

Anybody here who can fix this? Definitely seems like a bug to me right?

[BorisKamp]

For anybody encountering the same, for now I use without a provider like this:

      <NuxtImg
        v-if="settings?.auth_cover_image"
        :src="filePath(settings?.auth_cover_image, '?width=2000')"
        :placeholder="filePath(settings?.auth_cover_image, '?width=10')"
        loading="lazy"
        class="absolute inset-0 h-full w-full object-cover"
      />

My filePath composable looks like this:

export function filePath(file: DirectusFile, transformations?: string, format: string | null = 'webp') {
  let queryStr = transformations

  if (!file.filename_download || !file.id) { return null }

  if (queryStr && format) {
    queryStr = `${queryStr}&format=${format}`
  }
  else if (format) {
    queryStr = `?format=${format}`
  }
  else {
    queryStr = ''
  }
  return `${useRuntimeConfig().public.apiHost}/assets/${file?.id}/${encodeURIComponent(file?.filename_download)}${queryStr}`
}

This works perfectly fine as well....

[ulysse-lacour]

Same problem here with directus, weirdly it's only some images that are not found...