search

strapi / starters-and-templates

Monorepo for all official Strapi v4 templates
MIT License
327 stars 117 forks source link

Unoptimized image request for blur placeholder #56

Open nathanstork opened 2 years ago

nathanstork commented 2 years ago

I encountered an issue regarding the Strapi Starter Next Blog, but is most likely relevant to all Strapi starters and templates. When the blur placeholder prop is added to the Next Image component in frontend\components\image.js, the optimizations that Next does relating to the image get nullified. This is the case, because the optimized and unoptimized version of the image are then both fetched. This can be witnessed in the Network tab of the developer tools.

For clarification, if these two lines of code are added the raw and optimized version of the Strapi image are requested:

placeholder={"blur"}
blurDataURL={getStrapiMedia(image)}

Full code of frontend\components\image.js:

import { getStrapiMedia } from "../lib/media"
import NextImage from "next/image"

const Image = ({ image, style }) => {
  const { url, alternativeText, width, height } = image.data.attributes

  // const loader = () => {
  //   return getStrapiMedia(image)
  // }

  return (
    <NextImage
      // loader={loader}
      layout="responsive"
      width={width || "100%"}
      height={height || "100%"}
      objectFit="contain"
      src={getStrapiMedia(image)}
      alt={alternativeText || ""}
      placeholder={"blur"}
      blurDataURL={getStrapiMedia(image)}
    />
  )
}

export default Image