How to pass a signed image url in JSON, Fetch API, Django

I am having an issue with displaying images from the database when generating content dynamically using javascript and Fetch API. The images display correctly when accessing them with template tags.

I am trying to dynamically load different products based on the selected category. I have a products model, where i have defined an image which is hosted in linode object storage bucket. When accessing the image directly through a template with {{product.image.url}} the image displays correctly, and in the page source i can see a signed url to the file in the linode bucket as expected.

However, when loading the product data with javascript, the image does not load and in the page source i can see that it is incorrectly rendering a file path. (example app/product/image instead of https://....)

I use this code to render the image.

fetch(`opensubcategory/${id}`)
    .then(response => response.json())
    .then(data => {
        var subproducts = JSON.parse(data.products);
        for (var i = 0;i<subproducts.length;i++){
            var subproduct = subproducts[i].fields;
                let image = document.createElement('img');
                 console.log(subproduct.image)
                 imageurl = subproduct.image.url
                 image.src = imageurl;
                 image.classList.add("productimage");
                 imagediv.append(image);

console.log(subproduct.image) shows a file path

console.log(subproduct.image.url) shows undefined

Here is my server side code for this view:

def opensubcategory(request,id):
    subcategory = Subcategory.objects.get(pk=id)
    subcategory_products = Product.objects.filter(subcategory=subcategory)

    products_serialized = serialize("json",subcategory_products)

    return JsonResponse({"products":products_serialized})

How can i get the same value as i get when using {{product.image.url}} in the templates in my javascript code ?

I tried to create the url by passing in the product file path inside the url string, but it only worked for the specific image, because it had the correct xml signature. I could probably somehow generate a correct xml signature for each url, but i feel like there might be another option. Any tips / what would you suggest ? I want to make sure i am not missing some simpler solution before i dive into generating the signatures.

I fixed the issue by adding the image path to the linode url without signatures.

   imageurl = `https://example.eu-central-1.linodeobjects.com/example/media/${subproduct.image}`
   image.src = imageurl;