Image displays blank but src is set correctly

I’m making a dashboard page where I pull in some JSON, parse it and send the data to to display a chart. I parse the JSON after Page mounted and set a page variable that’s used by a formula in the Image component.

The problem I’m having is even though the API call goes through and the image src is set correctly, the image doesn’t display and just leaves a big blank spot in its place. I even passed a TIMESTAMP() into the URL to circumvent caching but that doesn’t seem to be the issue. I tried using a Background image on a Container instead, but it didn’t help.

This has me stumped. Anyone been able to get around this somehow? Can I manually refresh the image so it displays?

I didn’t have any trouble using a sample chart and some randomly generated data to change the chart dynamically. Can you provide an example of the URL that get’s generated? Or are you using the POST endpoint to get the image? This is the first time I’ve used QuickChart (really cool btw!) so I could be misunderstanding the issue.

Here is the sample chart I got from the website and I replaced the Dogs and Cats array with page variables. When the button is pressed the page variables are updated with random data.{type:‘bar’,data:{labels:[‘January’,‘February’, ‘March’,‘April’, ‘May’], datasets:[{label:‘Dogs’,data:[50,60,70,180,190]},{label:‘Cats’,data:[100,200,300,400,500]}]}}


You getting it working like that gives me hope that I can solve this. Basically I build the chart configuration in Custom Javascript since I have to transform some JSON considerably to get it in the right format for a chart. For now, though, I just imported a sample line chart from Quickcharts that I know works.


The page variable “personalChart” is then set to the output of that custom Javascript and passed into the image via a formula like this:

I can go into Inspect Element and see that the src has been set properly, and I can go to the src link to see the chart, but still no image shows up on the page.

There are a couple errors thrown when the image tries to load for the first time without the pageVariable being set, but once it is set properly shouldn’t it override and show the image correctly?

Ah! I see what you’re doing now. I’ll dive into the method you’re using and see what I can come up with.

1 Like

@Erik_Slatter Alright, I may have figured it out but my JS skills are VERY shoddy haha. So I basically just set a variable with some JSON and returned it. You might want to wrap the JSON stuff in a ENCODE_FOR_URL when building the URL, but it didn’t seem to hurt me not to have it.

I think the main difference between what I did and what you did was building the entire URL when setting the page variable rather than building it in the image component itself.

Here is my logic for when the page is mounted:

Here is the JS I used:

My formula for setting the Chart page variable: ""+ENCODE_JSON(outputs["Function"].result)

I then have a button which allows you to change the Chart page variable to a line chart

The JS for that:

Here is the result:

1 Like

@Adam_Wike I very much appreciate your thorough responses in helping me with this- thank you

Unfortunately I made a brand new page, implemented a chart in the exact same way you did, minus the button to switch back and forth, and still saw a blank image. I was hoping building the URL in logic flow would be the fix as you suggested, but that didn’t seem to be the case.

Then I noticed you were testing on a phone, so just for fun I decided to try and preview it on my Android phone… and it worked.

Now I’m even more confused than before… why in tarnation would dynamic images work on phones but not the web version?

@Erik_Slatter You’re correct. Mine isn’t working on the web version either but I see the issue. The opacity is set to 0 :neutral_face:

EDIT: Looks like the style gets messed up when you don’t use a static URL.

Opacity Set to 0 on Image in Web | Voters | AppGyver

1 Like

Weird, well thanks for submitting the bug report. In the meantime I’m trying to do a temporary fix but I can’t get the Javascript right.

I found the class name for my images but “document” keeps returning null so I’m not sure how to even access those objects.

If anyone has a working code snippet to access objects by class & change their style it would be much appreciated!