webpack 5: magic comments not working for images - reactjs

Question

I am trying to preload/prefetch an image so that I don't have to be connected to the internet at the exact moment to display the image. It's for a "you are offline" page in my app.
My app is written in React and I am using webpack for my bundler.
I was reading online that the webpack magic comments feature might be able to do that.
https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
It's not working for me.
The image that I am trying to preload/prefetch does not show and there is no <link rel tag added to the DOM.
Checkout the demo repository here:
https://github.com/aubreyquinn/preload-webpack-demo/tree/main
package.json:
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}

Answer 1

You have to use the useState hook to trigger the re-render, The webpack prefetching is working fine but react is not re-rendering since it is unaware of such loading.
import React, { useEffect, useState } from "react";
import Flowers from "../assets/flowers.jpg";
// Home component
const Home = () => {
const [lilies, setLilies] = useState(null);
useEffect(() => {
import(/* webpackPrefetch: true */ "../assets/lilies.jpg").then((res) => {
console.log(res);
setLilies(res.default);
});
}, []);
return (
<>
<div>React Application</div>
<img src={Flowers} height={200} />
<img src={lilies} height={200} />
</>
);
};
export default Home;
Try the above code out, it's working just fine.