Dear all,
The use case I want to do is :
1- In my bubble app, user select some parameters
2- Image is generated on dalle3
3- I save the temporary URL generated by dalle3 in my Data App
4- Using zapier, the image is saved on my Google Drive
5- Usine zapier, the URL of the image on Google Drive is saved in another field in my Data App
6- App displays the image generated by the user in the page of my app
My issue is that if I use the URL generated by Dalle# it works fine, but only for few hours due to the expiry…
But when I am trying to use “Web Content Link”, no image is displayed.
I have tried to use a field image and a text field with the URL but none display the image while if I click on the link, there is indeed the image opened in another page.
I want to embed the image in my page.
Please see attached the database screenshot.
We clearly see the image from Dalle3 is displayed here while the one from Google Drive is not… Probably causing the issue when on the page on the App…
Is the image and location of the image stored on your Google Drive public?
One way to check this out would be to take the URL you are storing and just put in a browser and see what happens. If it is publicly available then it will be shown, otherwise you will get a message.
(It may be Google Drive doesn’t allow references to storage through 3rd party web servers - I’ve never tried it).
Hello Alan8,
THx for your answer.
I believe I have authorized anyone who has the link to view the content => See attached. I am not too sure what do you mean by Google Drive Public?
And when I copy - paste the URL stored, in a browser (not logged in with my google account) the image is displayed.
Thx for these first answers !
I am available if you have other ideas ?
That URL is a not an image URL that can be embedded in a page. It is a reference to a page that holds the image itself.
You can need to be saving the image to a web readable location - like a CDN or a webserver or your own Bubble App.
Whilst you are saving it to Google, you are not saving the image location within your app. You are instead saving the location of the page that Google provides to you to see the image on the page within Google’s own Drive app.
You should look at saving it to your own bubble app using an API or image uploader or look to see whether you can configure something with Zapier to do the same.
Otherwise look at another solution: CDN or web space.
And there is no out of all the parameter in google drive, 1 of them that enable to link the image file to my bubble ?
Actually I wanted to save the image created (temporary) by dalle3, on my Drive to have it permanently and the URL from dalle3 looks like the one below.
So any other way may be to do it ?
You can still continue using your solution with Google Drive, but you’ll have to change the URL. As Alan himself said, the URL you’re storing isn’t an image that can be embedded on a page.
But Google has some tricks for this. Here’s your URL:
You should grab its ID (after d/ and before /view) and insert that ID into this URL:
Voilà , here’s your Google Drive image being displayed:
To extract the ID, you can easily utilize split by.
The thing is, displaying this in a standard image file from Bubble will result in distorted results because external images from Google don’t communicate with Bubble’s CloudFront. Unless you configure conditional sizes for display (which can be extremely tedious and may not work correctly), I advise you to display your images from now on in an HTML element.
In other words, you transform the GPT_Output_Image field into Text, not Image, and in an HTML element, paste the following code:
This makes the image fully responsive, filling the width of the HTML element entirely and making its height automatic, without you having to worry about conditionals or responsiveness, as this height changes as the screen contracts. Just start imagining this HTML element as an image.
