[Solved] Setting Image picture to a png retrieved from QR Code api

Well, it’s possible with a webviewer. Here’s a demo:


Edit: new version without webviewer:


Also a web app version: thunkablecompanion


Oh, no, I know that part, but I don’t think I can automate it’s creation and saving to airtable with thunkable

The only thing I found a lead with was somehow converting. The image to base 64. But I don’t think I can do that for what I’m doing here

So you’re wanting to store the image of the QR code in Airtable? Nope, I don’t think you can do that.

It would be a pain to make the user do all this but you could generate the QR code on their device using the webviewer method above and then ask them to take a screenshot and tap a button in your app to upload the screenshot to Airtable from their photo album. Again, messy!

But again, you don’t actually have the image. It’s not a block value in Thunkable that you can manipulate. All you have is a web url. That’s not going to allow you to access the image that’s generated.

Oh, shoot! I tried with web viewer and it just rendered x blank screen!!

This might work, they’ll just have to either save their png or screen shot it… For now…

Did you see the screenshot I posted above, with the demo link? Does that not work for you?

I also updated the project link.

I’ll try it in a bit! I’m actually at work :rofl:

I’ll do some fiddling on my break, thanks man.

1 Like

I had a thought. I bet there’s a way to extract an image from a url using an API. And you know what? There is! I don’t have it working yet but how sweet would that be if you could generate a url from the VIN # and then extract the QR code image with an API and have the png filename/url for use in your app? I think it’s possible now.

This looks promising: Smart Image Downloader - Algorithm by util - Algorithmia although it doesn’t appear to be free. I tried this one for a bit, too, but couldn’t quite get the API call to work: https://urlmeta.org

I think we are thinking a bit too hard about this problem. I was surprised that the API is returning an actual image. Since that is the case you can display the image thus

I haven’t worked with cloudinary (media DB) in a while, bit I THINK you can pass it the URL as a target


It was just returning a png, but I can’t use it for anything, I can’t set an image to it, I can’t put it into firebase in an “attachment” collum, nothing.

It’s a pain in the butt, because it just crashed when you try

The blocks above work for me.

You can set an image to the qr code png?


Ohh, okay, so instead of using an API block, use the text itself?

Although, I’m not familiar with the “busy” block :thinking:

Did you make a function?

Ignore busy and ready (custom functions). Sorry about that.

Oh. Right. I was over-thinking this. A url to an image is something we can just use as the value of a Picture component. Or, yes, upload it to Cloudinary.

1 Like

see, that i didn’t know. i assumed because it was an api, that it had to go into the api block and have the return value as the image, but i guess this would make 1000x more sense because its html… geeez… I’m a goofball, its like when you’re looking for food in the pantry and you keep looking, and cant find it.

then someone else walks up and grabs it right away, and it was right in front of you, lol

1 Like

That’s a whole lot easier. I’ll update the project link ahead but here’s a simplified version. It’s basically the same thing @drted shared.

yea, that’s… i feel like an idiot, lol…

also, i figured out that, when you want to add a new user account storage to the Real-time database, all you need to when they sign up is set the key to their new user id, and then make an object or list of the values email, vin, uuid, job history, etc… jeez, i expect things to be way harder to use than they actually turn out to be…


App development is full of experiences like this. You spend hours debugging some small feature and then realize that there’s a way to do the same thing in a tenth of the time. But it’s all learning, right? :slight_smile:


oh, heck yea!

1 Like