feat: `baseURL` editable at runtime

[sandros94]

Are there any plans to add other providers the ability to edit the baseURL at runtime?

Personally I would do something like (inside {provider}.ts):

if (!baseURL) {
  baseURL = joinURL(useRuntimeConfig().public.image.directus.baseURL, '/assets')
}

so that each provider (for those that need to) could add its own base URI.

What needs to be done in order to make useRuntimeConfig().public.image.{provider}.baseURL available to be edited at runtime?

P.S.: while reading #778 I noticed that there could be problems accessing useRuntimeConfig

[sandros94]

So far I've tested only Directus with this logic, and it seems to be working without issues.

The reason being is that I mainly use nuxt-directus, and on deployments it is easier for me to manage the Directus URL at runtime instead of buildtime.

I wonder if this should be hardcoded in the provider or exposed to a baseURL for the specific provider in the nuxt.config interface.

[joeycumines]

+1 the nuxt runtime config needs to be exposed to the image provider

[or2e]

#782

[jbmolle]

For Directus provider in the meantime you can do the following in your app.vue:

const runtimeConfig = useRuntimeConfig()
const directusBaseURL = runtimeConfig.public.directus.baseURL // or wherever your baseURL runtime env is defined
const img = useImage()
img.options.providers.directus.defaults.baseURL = directusBaseURL

[sandros94]

For Directus provider in the meantime you can do the following in your app.vue:

const runtimeConfig = useRuntimeConfig()
const directusBaseURL = runtimeConfig.public.directus.baseURL // or wherever your baseURL runtime env is defined
const img = useImage()
img.options.providers.directus.defaults.baseURL = directusBaseURL

Sorry, forgot to reply.

Yeah, since the creation of this issue I've used the following approach:

~/image-providers/custom-directus.ts:

import { joinURL } from 'ufo'
import type { ProviderGetImage } from '@nuxt/image'
import { createOperationsGenerator } from '#image'

export const operationsGenerator = createOperationsGenerator({
  joinWith: '&'
})

export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}) => {
  if (!baseURL) {
    baseURL = joinURL(useRuntimeConfig().public.directus.url, '/assets')
  }

  // Separating the transforms from the rest of the modifiers
  let transforms = modifiers.transforms
  if (transforms && Array.isArray(transforms) && transforms.length > 0) {
    // de-duplicate (can get multiplied when having >1 densities configured)
    transforms = Array.from(new Set(transforms.map(obj => JSON.stringify(obj)))).map(value => JSON.parse(value))
    // We stringify and encode in URL the list of lists, then apply it back to the modifiers
    modifiers.transforms = new URLSearchParams(JSON.stringify(transforms)).toString().replace(/=+$/, '') as unknown as (string | number)[][]
  }
  const operations = operationsGenerator(modifiers)
  return {
    url: joinURL(baseURL, src + (operations ? ('?' + operations) : ''))
  }
}

and in ~/nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    // ...
    '@nuxt/image',
    // ...
  ],
  image: {
    providers: {
      customDirectus: {
        name: 'custom-directus',
        provider: '~/image-providers/custom-directus.ts',
        options: {
          // ...
          }
        }
      }
    },
    provider: 'custom-directus',
    // ...
  },  
})

I would love to create a PR to solve this (for all providers), but I feel like that this requires a rework elsewhere that I'm not familiar with.

[oemer-aran]

For Directus provider in the meantime you can do the following in your app.vue:

const runtimeConfig = useRuntimeConfig()
const directusBaseURL = runtimeConfig.public.directus.baseURL // or wherever your baseURL runtime env is defined
const img = useImage()
img.options.providers.directus.defaults.baseURL = directusBaseURL

I tried this for ipx provider, but it doesn't seem to work. I am trying to set the domains and alias fields on runtime. Is this possible? useImage seems to be readonly on runtime. Being able to set the the config inside a plugin would be great.

const config = useRuntimeConfig()
const img = useImage()
img.options.providers.ipx.defaults.domains = [config.public.BACKEND_IMAGES_ENDPOINT]
img.options.providers.ipx.defaults.alias = {
    companyimages: `${config.public.BACKEND_IMAGES_ENDPOINT}/companyimages`,
    userimages: `${config.public.BACKEND_IMAGES_ENDPOINT}/userimages`,
}
img.options.providers.ipx.defaults.format = ["avif", "webp"]

I can also create a new issue if this is desired.