Nuxt•10mo ago

Image provider fired 3 times

Saw someone on github with the same issue (https://github.com/nuxt/image/issues/930) but not providing any information about how to fix it actually, when i look at the network tab it is making only one query, however it's logging the operations 3 times when i use console.log(operations) inside my provider

import type { ImageModifiers, ProviderGetImage } from '@nuxt/image'
import { joinURL } from 'ufo'

const operationsGenerator = (modifiers: Partial<ImageModifiers>) => {
  return `width=${modifiers.width}&height=${modifiers.height}`
}

export const getImage: ProviderGetImage = (src, { modifiers = {} } = {}) => {
  const baseURL = useRuntimeConfig().public.cdnUrl

  const operations = operationsGenerator(modifiers)

  console.log(operations)

  return {
    url: joinURL(baseURL, '/images', src + (operations ? '?' + operations : ''))
  }
}

import type { ImageModifiers, ProviderGetImage } from '@nuxt/image'
import { joinURL } from 'ufo'

const operationsGenerator = (modifiers: Partial<ImageModifiers>) => {
  return `width=${modifiers.width}&height=${modifiers.height}`
}

export const getImage: ProviderGetImage = (src, { modifiers = {} } = {}) => {
  const baseURL = useRuntimeConfig().public.cdnUrl

  const operations = operationsGenerator(modifiers)

  console.log(operations)

  return {
    url: joinURL(baseURL, '/images', src + (operations ? '?' + operations : ''))
  }
}

this is what it logs, but there is only one network request

GitHub

custom provider called 3x · Issue #930 · nuxt/image

Hi, I made a custom provider, but it seems its being called 3 times. Any idea why? //b2ImageProvider.js import { joinURL } from 'ufo' // import {} from '#image' export function getI...

1 Reply

NiekOP•10mo ago

interestingly enough it's also making the request with twice the set resolution somehow making up it's own values fixed: add densities="1"

Gaming

Programming

Image provider fired 3 times

Did you find this page helpful?