Is it possible to add BlurData using custom loader
Answered
"use php" posted this in #help-forum
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
35 Replies
For example, If I use a
next/image component somewhere, I want to automatically add blurDataUrl, which can be retreived by executing a functionBump
@"use php" I've a custom loader. Now for each and every item, I want blur placeholder with custom loader. How do I do that?
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
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 itso if my url is /image.png, it should add in blurdataUrl /image.png?blur=50
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
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
I've a mechanism(CF IMAGES) for returning blurred images.
@"use php" so if my url is /image.png, it should add in blurdataUrl /image.png?blur=50
Is it possible that in every images, it automatically adds it?
@"use php" Is it possible that in every images, it automatically adds it?
u mean it appending the blur param?
@gin u mean it appending the blur param?
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)i think not cause customLoader only returns src. U can just enhance the Image component and let that append it for u
Answer
@"use php" or do I need to use `@/lib/image`(create custom)
yeah probably that way
i searched the docs and didnt find anything
have fun!
@gin have fun!
So I realiseed one thing. How will I like get the width and all
because next/image adds it
@"use php" So I realiseed one thing. How will I like get the width and all
'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
@gin typescript
'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}
/>
)
}
what about blurImageUrl, as there will also be width there
@"use php" what about blurImageUrl, as there will also be width there
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
and use your loader function to append the width to it
My main concern is width, like in blurDataUrl, do I need different widths for optimisation?
@"use php" My main concern is width, like in blurDataUrl, do I need different widths for optimisation?
you are asking the wrong person lmao
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
I'll have a custom uri