How to use UUser, UFileUPload, etc without NuxtImage provider?

[dosstx]

Package

v4.x

Description

I have a question about using some of the NuxtUI components that make use of the img element. I am currently using an image provider called imagekit for NuxtImage but I have some components in my app that use a blob data object stored locally in the browser. However, when using components like UUser, Avatar, etc, NuxtUI is prepending the remote imagekit provider to the files, and thus, this breaks the images.

This is how I have NuxtImage configured in my nuxt.config file:

  image: {
    provider: 'imagekit',
    imagekit: {
      baseURL: 'https://ik.imagekit.io/<REMOVED>/'
    },
    domains: [
      'lh3.googleusercontent.com',
      'firebasestorage.googleapis.com',
      'api.dicebear.com'
    ],
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
      '2xl': 1536
    }
  },

Is there a way to "disengage" the imagekit provider for certain NuxtUI components so that way the default behavior is used? Thank you!

[benjamincanac]

This has been fixed in 69906bc (#4824) and released in https://github.com/nuxt/ui/releases/tag/v4.1.0.

The FileUpload component won't use NuxtImg inside the Avatar and you can use the same pattern in your app:

<template>
  <UAvatar src="" :as="{ img: 'img' }" />
  <UUser :avatar="{ src: '', as: { img: 'img' } }" />
</template>