novel wigeon
Hello,
I am trying to dynamically load an image file stored locally in the app.get('userData') (aka Application Support on macOS) directory, via a custom protocol, as a background image using Tailwind with React. Here is some simplified code of what I am trying to do:
export function Cover() {
const [coverImagePath, setCoverImagePath] = useState<string>('');
useEffect(() => {
const fetchInitialValues = async () => {
const path = `ocheeflow:///Users/xyz/Library/Application Support/ocheeflowxp/bg-images/sunset_wallpaper.jpg`;
setCoverImagePath(path);
};
fetchInitialValues();
}, []);
return (
<>
<div
style={{'--image-url': `url(${coverImagePath})`} as React.CSSProperties}
className='bg-[image:var(--image-url)] bg-no-repeat bg-cover bg-center'
>
<p>Hello world</p>
</div>
</>
);
}
There is no error in the console, and the background just appears black (see attached image). I have tested this code with a url from a public hosted image (e.g. const path = https://picsum.photos/id/17/2500/1667, and the background image is displayed, so I'm unsure if tailwind can even be used to fetch local files dynamically.
I know the issue is not with my custom protocol, as I am using it elsewhere in my app's UI successfully.
Here is my custom protocol code for reference:
app.on("ready", () => {
...
// Custom protocol handler to show images in renderer
protocol.handle('ocheeflow', (request) => {
const filePath = request.url.slice('ocheeflow://'.length);
const updatedPrefixPath = 'file://'+filePath;
return net.fetch(updatedPrefixPath);
});
...
});
cursive dagger