Integrating access controlled static docs into SolidJS app using Supabase

Question

I am trying to create a website with Supabase as the backend and SolidJS for the frontend. The users of this website are logged in, authenticated using Supabase, and have access to some docs, based on their permissions which also stored in Supabase database. My static docs are generated using Sphinx and I used the 'json' output option for this, which gives me a folder structure containing doc pages (in json files) and some other static components, such as image files. I have uploaded these folders and files to the Supabase storage.

The static html snippets I get from the jsons, which I have managed to integrate into my SolidJS website, refer to the image files to load them into the page. I have tried to use the SolidJS Router to add the image paths and return images for those paths.

The problem I have happens when I try to render a page with an URL ending in '.png'. I keep getting the very helpful error:

'The image "somepage.png" cannot be displayed, because it contains errors.'

If I take the .png ending of the URL away (and compensate for this in my SolidJS code), the page works fine and just displays the image, so fetching the image from Supabase doesn't seem to be the problem. I guess the problem is that the browser expects a png image, but instead receives a html file wrapping around the image. This is what my SolidJS function returns when the router detects routing to an image path:

return ( <img src={image()} alt="Image" /> );

where the value of the Signal getter image() is set using:

let { data, error, status } = await supabase
    .storage
    .from('docs')
    .download(file_path)

if (error && status !== 406) {
    throw error
}

if (data) {
    setImage(URL.createObjectURL(data))
}

I'm not sure how to best fix this problem. If there is a simple way to correctly render the png page that would be useful. Otherwise, I could try and do some string replacement on the html snippets from the json files, but I'm not sure if that would break some other functionality. I'm quite new to web development, so maybe I'm just approaching the docs integration completely wrong. Any help to make this work would be greatly appreciated!

For reference, I had been trying to roughly follow this idea: Rendering Sphinx Documentation with React

Answer 1

Instead of downloading the image locally, it's better to just get the image URL. If your bucket is public, you can do something like this:

const { data } = supabase
  .storage
  .from('docs')
  .getPublicUrl(file_path)

setImage(data.publicUrl)