Next.js Discord

Discord Forum

Is it possible to add BlurData using custom loader

Answered
Anay-208 posted this in #help-forum
Open in Discord
Anay-208OP
I've a custom loader. Now for each and every item, I want blur placeholder with custom loader. How do I do that?
Answered by gin
i think not cause customLoader only returns src. U can just enhance the Image component and let that append it for u
View full answer

35 Replies

Anay-208OP
For example, If I use a next/image component somewhere, I want to automatically add blurDataUrl, which can be retreived by executing a function
Anay-208OP
Bump
@Anay-208 I've a custom loader. Now for each and every item, I want blur placeholder with custom loader. How do I do that?
gin
i think u could enhance the Image component (Your own Image component that inherits next image) and have that do the blurring
am i understanding it correctly?
i think the custom loader only returns the src and not the blurDataUrl
Anay-208OP
Sort of that, I can surely create another file, for it, like @/lib/image, however, I think it would be better if there was alternate to directly do it
so if my url is /image.png, it should add in blurdataUrl /image.png?blur=50
gin
Ah yeah i understand
depends on where u host your images
u could have a handler for your images that returns and caches your blurred image
in base64
Anay-208OP
I've a seperate api route for it
which returns the images
@gin u could have a handler for your images that returns and caches your blurred image
Anay-208OP
I've a mechanism(CF IMAGES) for returning blurred images.
@Anay-208 so if my url is /image.png, it should add in blurdataUrl /image.png?blur=50
Anay-208OP
Is it possible that in every images, it automatically adds it?
@Anay-208 Is it possible that in every images, it automatically adds it?
gin
u mean it appending the blur param?
@gin u mean it appending the blur param?
Anay-208OP
Yup, so in every next/image Url, is it possible to automatically add Blurred image url by appending it?
or do I need to use @/lib/image(create custom)
gin
i think not cause customLoader only returns src. U can just enhance the Image component and let that append it for u
Answer
@Anay-208 or do I need to use `@/lib/image`(create custom)
gin
yeah probably that way
i searched the docs and didnt find anything
have fun!
@gin have fun!
Anay-208OP
So I realiseed one thing. How will I like get the width and all
because next/image adds it
@Anay-208 So I realiseed one thing. How will I like get the width and all
gin
'use client'
 
import Image from 'next/image'
 
const imageLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}
 
export default function Page() {
  return (
    <Image
      loader={imageLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}
nextjs should be passing the props in the loader callback
@Anay-208 what about blurImageUrl, as there will also be width there
gin
i think when using your own component u can have your blur url be constructed by the return value of your own custom Loader
but that would require some kind of state tracking i think or prolly just mutating your src defined with let
so: let blursrc
and use your loader function to append the width to it
Anay-208OP
My main concern is width, like in blurDataUrl, do I need different widths for optimisation?
i think cause of the way blur works with base64 appending width isnt a big deal
like nextjs prolly optimizes it automatically using that string
Anay-208OP
I'll have a custom uri