Add placeholder="blur" to multiple remote images in nextjs

user_11866037 0
Viewed 2286

I have a nextjs app which shows movies and their posters from an api and I am trying to add a blur effect to all images before they are fully loaded to be displayed. I found this comment on github discussion which uses plaiceholder but I couldn't find a way to make it work for multiple images. Here is some of my codes

// index.js

...
 return (
    <>
      <MovieList data={props.data.trending} title="Trending Right Now" />
      <MovieList data={props.data.popular} title="Popular" />
    </>
  );

export async function getStaticProps() {
  var promises = [];
  const api_key = '...'; // don't worry about api key I can make another one
  const urls = [
    `https://api.themoviedb.org/3/trending/movie/week?api_key=${api_key}`,
    `https://api.themoviedb.org/3/movie/popular?api_key=${api_key}&language=en-US&page=1`
  ];

  urls.forEach(function(url) {
    promises.push(
      axios.get(url).then(
        function(data) {
          return { success: true, data: data };
        },
        function() {
          return { success: false };
        }
      )
    );
  });
  const [trendingRes, popularRes] = await Promise.all(promises);

  const trending = trendingRes.success === false ? null : trendingRes.data.data;
  const popular = popularRes.success === false ? null : popularRes.data.data;

  return { props: { data: { trending, popular } } };
}

// MovieList.js

   {props.data
        ? props.data.results.map((movie, index) => {
            return (
              <>
                ...
                <div>
                  <Image
                    src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
                    alt="movie poster"
                    width="260"
                    height="391"
                    placeholder="blur" // doesn't work
                  />
                </div>
              </>
            );
          })
     : 'Not found'}

You can see full code here

nextjs-image next.js
3 Answers

You can provide a blurDataURL prop when using dynamic images to be blurred.

When parsing the data received from the API in getStaticProps, convert the images to base64 using plaiceholder.

// index.js - getStaticProps

const [trendingRes, popularRes] = await Promise.all(
    urls.map((url) =>
        axios.get(url).then(
            (data) =>
                Promise.all(
                    data.data.results.map((one) => {
                        return getPlaiceholder(`https://image.tmdb.org/t/p/w500${one.poster_path}`)
                            .then(({ base64, img }) => {
                                return { ...one, img, base64 };
                            })
                            .catch(() => ({ ...one, img: null, base64: null }));
                    })
                )
                .then(
                    (values) => ({ success: true, data: values })),
                    () => ({ success: false })
                )
        )
    ).then((data) =>  data);
)

Then in your MovieList component, use blurDataURL in conjunction with placeholder="blur".

// MovieList.js

{props.data && 
    props.data.map((movie, index) => {
        return (
            <>
                <div>
                    <Image
                        src={movie.img}
                        alt="movie poster"
                        width="260"
                        height="391"
                        placeholder="blur"
                        blurDataURL={movie.base64}
                    />
                </div>
            </>
        );
    })
}
user_18707800

If you are using a CDN to serve images, Next.js also supports blurring dynamic images by allowing you to provide a custom blurDataURL, which is provided by your back-end.

<Image
    src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
    alt="movie poster"
    width="260"
    height="391"
    placeholder="blur"
    blurDataURL="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAb/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWEREiMxUf/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRm knyJckliyjqTzSlT54b6bk+h0R//2Q=="
/>
user_37902170

I finally managed to work by using plaiceholder and converting images in each api to blurhash code during api calls and use that code along with react-blurhash in my movieList component

// index.js 

  const [trendingRes, popularRes] = await Promise.all(
    urls.map((url) =>
      axios.get(url).then(
        (data) =>
          Promise.all(
            data.data.results.map((one) => {
              return getPlaiceholder(
                `https://image.tmdb.org/t/p/w500${one.poster_path}`
              )
                .then(({ blurhash, img }) => {
                  return { img, ...one, blurhash };
                })
                .catch(() => ({ ...one, img: "error", blurhash: null }));
            })
          ).then((values) => ({ success: true, data: values })),

        () => ({ success: false })
      )
    )
  ).then((data) =>  data);

// movieList.js 

      {props.data
        ? props.data.map((movie, index) => {
            return (
              <>
                {movie.blurhash ? (
                  <div className="overflow-hidden relative block w-[260px] h-[391px]">
                    <BlurhashCanvas
                      punch={1}
                      hash={movie.blurhash.hash}
                      width={movie.blurhash.height}
                      height={movie.blurhash.width}
                      className="absolute left-0 top-0 w-full h-full inset-0"
                    />

                    <Image src={movie.img.src} width="260" height="391" />
                  </div>
    
               // show image without blur effect if there is any blurhash error 
                ) : ( 
                  <Image
                    src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
                    width="260"
                    height="391"
                    className="aspect-w-260 aspect-h-391"
                  />
                )}
              </>
            );
          })
        : "Not found"}
user_118660370
Related