score:2

the suspense component in react 16.x only lets you wait for some code to load, not any type of data (including images). suspense for data fetching is still experimental. so you need to handle it manually if you don't want to use an unstable version.

import react from "react";
import resume from "../assets/joe_rogan_resume.jpg";
import banner from "./banner";

const resume = () => {
  const [isimageloaded, setisimageloaded] = react.usestate(false);

  react.useeffect(() => {
    const image = new image();
    image.onload = () => setisimageloaded(true);
    image.src = resume;

    return () => {
      image.onload = null;
    };
  }, []);

  if (!isimageloaded) {
    return null;
  }

  return (
    <div id="container">
      <banner styleclass="resumepagebanner" h1text="my resume" />
      <div classname="resumepage">
        <div id="resume">
          <img src={resume} alt="resume" />
        </div>
      </div>
    </div>
  );
}

export default resume;

Related Query

More Query from same tag