Discussion on: How to Make a Markdown Blog With Next.js

[Søren Hougaard Mulvad]

I tried to adapt the last part of your blog (optimizing the images) to my own project. I ran into the following problem though: If the image is cached, img.onLoad won't trigger resulting in the lqip image staying "on top". I solved it the following way, but is there a nice way that doesn't use useRef()?

import React, { useState, useRef, useEffect } from "react";
// ...
const Image = ({ alt, src }) => {
  const imgRef = useRef();

  // ...

  useEffect(() => {
    if (imgRef.current && imgRef.current.complete) {
      setImageLoaded(true);
    }
  }, []);

  return (
    <div className="relative">
      {/* lqip image ... */}
      <img
        ref={imgRef}
        // ...
      />
    </div>
  );
};

[Jose Felix]

Hi Søren, thanks for the read! One alternative is to use lazysizes. It is an awesome library that lets you create High performance and SEO friendly lazy loader for images. Check it out. You can also see my implementation in the repository