title: How to suspense the whole component before the image inside is loaded?
body: <p>I have the following component:
  In this component, there is an image.
  When I load the page, I realize the page will be loaded first then the image will be loaded later. How can I suspense the whole page before the image is loaded?
  I have tried to wrap the whole div (id=&quot;container&quot;) in a Suspense component with a fallback method but it doesn't seem to work on images, and only on components.</p>
  <p>How can I suspense the whole component before the image inside is loaded?</p>
  <pre><code>import React from &quot;react&quot;;
  import resume from &quot;../assets/Joe_Rogan_Resume.jpg&quot;;
  import Banner from &quot;./Banner&quot;;
  
  const Resume = () =&gt; (
    &lt;div id=&quot;container&quot;&gt;
      &lt;Banner styleclass=&quot;ResumePageBanner&quot; h1text=&quot;My Resume&quot; /&gt;
      &lt;div className=&quot;resumePage&quot;&gt;
        &lt;div id=&quot;resume&quot;&gt;
          &lt;img src={resume} alt=&quot;Resume&quot; /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  
  export default Resume;
  </code></pre>