How to add dynamic images to an email with sendgrid?


I have implemented the Sendgrid API (using the API connector) and I’m trying to send dynamic images. Basically, I have replaced the image path with a “tag” : {{{ Image_Header_Path }}}. Unfortunately, when I send the bubble Amazon S3 link to the tag , it’s not working. (I just have a big white square).

Here’s what I did :

Does someone had the same issue?


I’m not sure why, but when you reference a file url in Bubble, it never includes the https:

The URL for an image uploaded in Bubble will be returned as: //

So (if you haven’t already done so) make sure you include https: before referencing the image URL. You can do that either in your Sendgrid template, or in your API call.

If that’s not the issue, then I can’t see what is, so you might have to do some further investigating (try viewing the source of the email when it sends to check if the image source is correct or not).

I’ve tried both way (https: before the image URL and https: directly in the template) but still no results.

However, I’ve noticed that when I upload an image on Sendgrid, and I paste their image url, the image is automatically downloaded on my computer (instead of opening in a tab). Could it be the reason?

I’m not sure about that, but the only other obvious thing it could be is to do with privacy settings so check those…

Try sending yourself the email, and check the source code of the email when it arrives, to see what the image source is. Check if it’s the correct URL, and see if you can access it directly (best to do it incognito to see if there are any privacy settings blocking access to it).

Other than that, I’m all out of ideas, I’ve never had any issue with dynamic images being sent through Sendgrid, so can’t make any other suggestions there I’m afraid.

@maxime1 I just solved an issue I had with this, in the API workflow, set the Tag to include the following: https:“what ever dynamic image” 's URL, I was breaking my head with this but was missing the url part. I don’t know if I’m clear enough, here goes a picture of both the HTML code and API tag config:

Screenshot 2021-04-08 022900

Screenshot 2021-04-08 022835

Also, could the spaces between the curly braces and the tag break things?

Hope this helps!!


I guess {{Image_Header_Path}} works

Thank you

1 Like