title: I'm trying to screenshot my React Component using wkhtmltoimage, but it can't seem to parse the CSS and Images properly. Am I missing some config?
body: <p>My react component using Tailwind.css:</p>
  <pre><code>import Image from 'next/image'
  
  function Chibi({ children }) {
      return (
        &lt;&gt;
          &lt;div className=&quot;h-[21.875rem] w-[21.875rem] bg-slate-700 static flex pointer-events-none&quot;&gt;
              {/* hello world */}
              &lt;div className=&quot;absolute top-0 left-0&quot;&gt;
                  &lt;Image src=&quot;/traits/base/regular.png&quot; height={350} width={350} loading=&quot;eager&quot;&gt;&lt;/Image&gt;
              &lt;/div&gt;
              &lt;div className=&quot;absolute top-0 left-0&quot;&gt;
                  &lt;Image src=&quot;/traits/clothes/regular.png&quot; height={350} width={350} loading=&quot;eager&quot;&gt;&lt;/Image&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/&gt;
      )
    }
  
  export default Chibi
  </code></pre>
  <p>My Next.js file utilising wkhtmltoimage:</p>
  <pre><code>import Chibi from '../../components/Chibi'
  import { renderToString } from 'react-dom/server'
  import { renderToStaticMarkup } from 'react-dom/server';
  const homedir = require(&quot;os&quot;).homedir();
   
  const wkhtmltoimage = require(&quot;wkhtmltoimage&quot;).setCommand(
    homedir + &quot;/../../Program Files/wkhtmltopdf/bin/wkhtmltoimage&quot;
  );
  export default async function handler(req, res) {
    try {
   
      await wkhtmltoimage.generate(renderToStaticMarkup(&lt;Chibi&gt;&lt;/Chibi&gt;)).pipe(res);
      res.status(200);
  
    } catch (err) {
      res.status(500).send({ error: 'failed to fetch data' })
    }
  }
  </code></pre>
  <p>Expected:</p>
  <p><a href="https://i.stack.imgur.com/CLfQ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CLfQ2.png" alt="enter image description here" /></a></p>
  <p>Output:</p>
  <p><a href="https://i.stack.imgur.com/aa3RT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aa3RT.png" alt="enter image description here" /></a></p>
  <p>I know there could be lots of factors that could be involved here. Can anyone point me to the right direction? Thank you.</p>