Using next/image while maping through an array with static pictures and using placeholder="blur"

Question

Hello I'm using Nextjs for my portfolio and I'm using static pictures, the problem I find with the placeholder="blur" on next/image Image component is it doesn't work when I'm mapping through an array to display multiple pictures, the problem i get us this:

Error: Image with src "" has "placeholder='blur'" property but is missing the "blurDataURL" property. Possible solutions: - Add a "blurDataURL" property, the contents should be a small Data URL to represent the image - Change the "src" property to a static import with one of the supported file types: jpeg,png,webp,avif (animated images not supported) - Remove the "placeholder" property, effectively no blur effect Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url

Now here it's demanding the blurDataURL while I'm only using static imported pictures which are mapped through in an Array.

import scrumCourse from "@/assets/images/scrumCert.webp"

the array:

const certificates = [{
name: "scrum-cert",
avatar: scrumCourse, // statically imported picture
link: "https://udemy..........", },]

Here is snippet of my code :

{[...new Array(10)].fill(0).map((_, index) => (
        <Fragment key={index}>
          {certificates.map(certificate => (
            <Card key={certificate.name} className="max-w-[400px] md:max-w-md p-2 md:p-4 items-center transition duration-300 hover:rotate-1">
              <Link href={certificate.link} target="_blank" >
                <div className="relative w-[416px] h-[321.45px] object-cover">
                  <Image
                    src={certificate.avatar}
                    alt={certificate.name}
                    placeholder="blur"
                    fill
                    className="max-h-full rounded-3xl" />
                </div>
              </Link>
            </Card>
          ))}
        </Fragment>
      ))

Arsany Benyamin · Accepted Answer · 2025-02-13 21:40:25Z

0

According to Nextjs official Docs

https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

https://nextjs.org/docs/app/api-reference/components/image#placeholder

if you specified option blur for placeholder prop, then you should specify blurDataURL prop also (which, btw, is what the error is telling you to do)

Only an exception to this case is when you use static imports

By static imports, it means

import image from './images/image1.png'

and pass it this way

<Image
src={image}
placeholder='blur'
/>

In this case only, the static image will be used as blurData because it can be fetched in buildtime

other than that you should specify blurDataURL

I see you are providing the src dynamically through certificate.link

So you either import your images statically OR provide a blurDataURL

answered Feb 13 at 21:40

Arsany Benyamin

3013 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AmineDev Feb 14 at 13:09

Hello Arsany thank you for answer. Just for clarification I'm importing my pictures statically and then i include them inside an Array called certificates you can see that inside the image I'm calling the src={certificate.avatar} meaning the picture import included inside the array objects by the name of avatar. What i find here is that the pictures are imported statically for example: import image from './images/image1.png' const certificates = [ { name: "scrum_cert", avatar: scrumCourse, // imported statically link: "udemy.............", }, ]

Collectives™ on Stack Overflow

Using next/image while maping through an array with static pictures and using placeholder="blur"

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related