Refused to load the image because it violates Content policy - reactjs

Question

I've been stuck with this for days and finally decided to ask out. I've read dozens of issues, pages here but none of them solved my problem. I have an application built on top of this boilerplate: https://github.com/codesbiome/electron-react-webpack-typescript-2022 (the boilerplate isn't important as much, but there are some webpack configs there). I've read the documentation and it says that I should define a protocol for rendering images in this case, like this
app.whenReady().then(() => {
protocol.registerFileProtocol('atom', (request, callback) => {
const filePath = url.fileURLToPath(
'file://' + request.url.slice('atom://'.length),
);
callback(filePath);
});
});
This responds with an error "refused to load resource", even with content security policy set like this:
<meta
http-equiv="Content-Security-Policy"
content="
worker-src atom:;
child-src atom: gap:;
img-src 'self' atom: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
/>
If I change atom to something like blob or file it errors with "it is not allowed to load resource".
I'm rendering it inside react, like this
const image_path = `atom://${image.path}`;
<img src={image_path} />
Turning off security doesn't work, and even if it did I don't find it as an acceptable answer. I'm trying to read the file off of the local machine and I've looked up how some other applications that use electron are doing it (by uploading it to their servers). But I'm still wondering if something like this was even possible without an additional server as I want the app to work offline. Thank you.