reactjs - Using nextimage while maping through an array with static pictures and using placeholder="blur" - St

admin管理员组

文章数量:1290964

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:

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>
      ))

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./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>
      ))

• reactjs
• next.js
• lazy-loading
• nextjs-image

Share Improve this question Follow edited Feb 14 at 13:13 AmineDev asked Feb 13 at 20:14 AmineDevAmineDev 2344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

According to Nextjs official Docs

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

https://nextjs./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

本文标签：