Next.js Discord

Discord Forum

Static Image In Reusable Component

Answered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
In one of my pages, I map through an object that loads a reusable componenet 

{state.shows.map((item, index) => {                        return (
    <ProjectItem
    show={item}
        key={item.URL}
    index={index}
    scroll={scroll}
    />
    }
    })}


In that component, I call an image

  <Image
    onMouseEnter={mouseEnter}
    onMouseLeave={mouseLeave}
    src={`/img/portfolio/${show.URL}/${show.URL}-cover.webp`}
    fill={true}
    alt={show.Title}
/>


All works fine, however I'd like to be able to use the static import options; such as placeholder="blur" ... Is there a way to do this? Currently the only thing I can think of is do have a json list that exports all the imports, then pass it via props. Any better way to do this?
Answered by American Crow
You can set a blurDataURLmanually
 <Image
    onMouseEnter={mouseEnter}
    onMouseLeave={mouseLeave}
    src={`/img/portfolio/${show.URL}/${show.URL}-cover.webp`}
    fill={true}
    alt={show.Title}
    placeholder="blur"              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNc0JH2BwAF6gKM1oBooQAAAABJRU5ErkJggg=="
/>

here is the docs
https://nextjs.org/docs/app/api-reference/components/image#blurdataurl
View full answer

6 Replies

Answer
@American Crow You can set a `blurDataURL`manually tsx <Image onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} src={`/img/portfolio/${show.URL}/${show.URL}-cover.webp`} fill={true} alt={show.Title} placeholder="blur" blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNc0JH2BwAF6gKM1oBooQAAAABJRU5ErkJggg==" /> here is the docs https://nextjs.org/docs/app/api-reference/components/image#blurdataurl
Asian black bearOP
ah, yes I was aware of that. I guess where I may be confused, or questioning, is from my understanding you use the blurDataURL when using like an external image, where as with the static import (via the public) folder next has access to that at build. So I guess my next question would be is there any optimization difference in one vs the other, or am I just spinning my wheels for no reason 😄
American Crow
From my knowledge optimization wise it's the same. The static imported image just provides some attributes automatically like bluras you already mentoined but also widhtand height. Nextjs can read that automatically simply because the image is known at build time. If its a realtive path src=/img/me.png those values are not known at build time hence you have to set them yourself
For blur espically it's just having a "nice" placeholder vs. a white box placeholder as far as i know
The main goal to avoid layout shifts is a given in both ways
Asian black bearOP
gotcha! thanks for the info!