Dynamic images appear fine with in-app previews, but are missing in Gmail: why is this happening?
Gmail can be a tricky inbox provider when it comes to emails rendering correctly! Klaviyo dynamically pulls images from your site through image source URLs from your integration. Sometimes these image source URLs may not have the http: or https: included, which can cause images not to render in Gmail.
To fix this issue, add |httpsize to the placeholder tag for the image. This will look different for each scenario, but here’s an example of what this might look like:
{{ event.product_image_urls_1|httpsize }}
The tags can be different but the filter will remain the same. Adding this placeholder tag should be the trick to solving this issue!
Page 1 / 1
Hi @shoshana.antunes… Thanks for posting this solution. I thought I found the answer to the issue I was having but it doesn’t seem to be fixing the issue on my end. :(
I’m appending an event property to a URL to dynamically populate a variable. When I preview the message on the platform, it shows up as expected. However, when I send myself a test message, the image is broken. It’s not an issue of the “http:” or “https:” getting stripped from the code, so I don’t think adding |httpsize will help in our case. (FWIW, I tried adding it to see what would happen, and that breaks the preview on Klaviyo too.)
I’ve included some screenshot examples of what I’ve put together and how I’ve tried to dig into and troubleshoot this issue below.
When I preview the message, this “star rating” image shows up as expected:
This is the source code from the table populating this image (for reference):
The {{ event.hotel2tarating }} value for this record is 4.5 and it’s dynamically populating the URL in the preview. (This is the final URL of the image: https://www.cheapflightsfares.com/resources/assets/trustpilot/stars-4.5.svg . You can copy/paste this URL into a browser window and the “star rating” image displays as expected.)
When I send this email to myself and view it in Gmail, the “star rating” image shows up as broken:
When I right-click the broken image to get the image address, this is what comes up:
Since the photo to the left of this broken image does show up in Gmail, I copied the image URL to see if there’s any noticeable difference between information being appended (but I can’t figure out what the issue may be…?)
I also sent myself a test message to a non-gmail account (Yahoo) and the “star rating” image IS displaying as expected. This seems to be something with Gmail?
If you have any further ideas or thoughts on how we can troubleshoot this, I’ll be all ears!
Thank you in advance for any help you can provide!
This solution is working on our end! Thank you!!
Hi @shoshana.antunes… Thanks for posting this solution. I thought I found the answer to the issue I was having but it doesn’t seem to be fixing the issue on my end. :(
I’m appending an event property to a URL to dynamically populate a variable. When I preview the message on the platform, it shows up as expected. However, when I send myself a test message, the image is broken. It’s not an issue of the “http:” or “https:” getting stripped from the code, so I don’t think adding |httpsize will help in our case. (FWIW, I tried adding it to see what would happen, and that breaks the preview on Klaviyo too.)
I’ve included some screenshot examples of what I’ve put together and how I’ve tried to dig into and troubleshoot this issue below.
When I preview the message, this “star rating” image shows up as expected:
This is the source code from the table populating this image (for reference):
The {{ event.hotel2tarating }} value for this record is 4.5 and it’s dynamically populating the URL in the preview. (This is the final URL of the image: https://www.cheapflightsfares.com/resources/assets/trustpilot/stars-4.5.svg . You can copy/paste this URL into a browser window and the “star rating” image displays as expected.)
When I send this email to myself and view it in Gmail, the “star rating” image shows up as broken:
When I right-click the broken image to get the image address, this is what comes up:
Since the photo to the left of this broken image does show up in Gmail, I copied the image URL to see if there’s any noticeable difference between information being appended (but I can’t figure out what the issue may be…?)
I also sent myself a test message to a non-gmail account (Yahoo) and the “star rating” image IS displaying as expected. This seems to be something with Gmail?
If you have any further ideas or thoughts on how we can troubleshoot this, I’ll be all ears!
Thank you in advance for any help you can provide!
I am having the same issue, but with a static product block. This issue only affects one product in my campaign, the others are showing up just fine. Did you figure out what the issue was?
