Pictures do not load in email template
I have got two mailings. I created a workflow which requests JSON product recommendations to Target. Then I put urls/product name, price etc. into html.
- One has an h2 with a header. It looks like this the pictures are not loaded.
- The other doesn't have it the div with text and it works ... Pictures are loaded
HTML is like this. If I add bold element then the product pictures does not work:
<div style="text-align: center; padding-bottom: 20px;">
<img src="https://demo-system-next.s3.amazonaws.com/assets/luma/banners/AdobeStock_570499457.jpg" alt="Banner Image" style="width: 100%; border-radius: 8px;">
</div>
<div>
Check-out the products which you might like
</div>
<div style="width: 100%; max-width: 600px; margin: 0 auto; text-align: center;">
<div style="display: flex; justify-content: space-between;">
<div style="width: 32%; padding: 10px; box-sizing: border-box;">
<img src=<%= variables.x1 %> alt="Column 1" style="max-width: 100%; height: auto;">
<p><%= variables.x2 %></p>
</div>
<div style="width: 32%; padding: 10px; box-sizing: border-box;">
<img src=<%= variables.x4 %> alt="Column 2" style="max-width: 100%; height: auto;">
<p><%= variables.x5 %></p>
</div>
<div style="width: 32%; padding: 10px; box-sizing: border-box;">
<img src=<%= variables.x7 %> alt="Column 3" style="max-width: 100%; height: auto;"> </img>
<p><%= variables.x8 %></p>
</div>
</div>
</div>
Do you you have any ideas why is that? How to debug this?
Topics
Topics help categorize Community content and increase your ability to discover relevant content.
Hi @Michael_Soprano ,
Here is mine observation and some suggestions for your issue:
Potential Issues and Debugging:
- HTML Structure and Flexbox: The code uses display:flex to arrange the product columns. Flexbox layouts can sometimes be sensitive to additional elements (like headers) that might inadvertently disrupt the layout. If an <h2> or other block-level elements are added directly before the flexbox container, they might push or misalign elements, causing issues with image rendering.
- CSS Specificity and Inheritance: Adding an <h2> might introduce unexpected margins, paddings, or other CSS properties that affect the layout. These properties might shift elements or cause layout issues in email clients, leading to images not loading.
- Email Client Rendering: Different email clients render HTML and CSS differently. Adding a header tag, such as <h2>, might trigger different rendering modes or cause issues with how the email client processes the HTML structure.
Suggestions:
- Test with Inline Styling on the Header: If you plan to use an <h2>, ensure you control its styling to prevent it from affecting the layout.
Add this before the product container and see if the images still load.
<h2 style="margin: 0; padding: 10px 0; text-align: center;">
Check-out the products which you might like
</h2>
- Place Header Outside Flexbox: Ensure that if you're using a header, it's placed outside any display: flex containers to avoid any layout disruption.
- Use a <div> Instead of <h2>: If you don't require the semantic benefits of a header tag, consider using a styled div to simulate the header:
<div style="font-size: 24px; font-weight: bold; margin-bottom: 20px; text-align: center;">
Check-out the products which you might like
</div>
- Run an Email Client Test: Tools like Litmus or Email on Acid can help test how the email renders across different clients and diagnose where the issue may lie.
These steps should help you identify and resolve the issue with the images not loading when using a header.
Best regards,
MEIT MEDIA (https://www.meitmedia.com)
Contact Us: infomeitmedia@gmail.com
Hi @Michael_Soprano ,
Outlook has limited support for CSS, especially when it comes to styling within <div> tags. This could definitely be contributing to the image rendering issues you're experiencing.
Steps to Resolve Image Rendering Issues:
- Replace <div> tags with <table>, <tr>, and <td> tags for layout purposes. Tables are more widely supported across different email clients, including Outlook.
- Instead of relying on CSS within <div> tags, use inline styles directly within your <img> and <td> tags. This ensures better compatibility, especially with Outlook.
- Minimize the use of advanced CSS properties like display: flex;, justify-content, and margins/paddings. Stick to basic properties that are well-supported by email clients.
Here's a simplified version using a table-based layout and inline styles you can try to test:
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse; text-align: center;">
<tr>
<td colspan="3" style="padding-bottom: 20px;">
<img src="https://demo-system-next.s3.amazonaws.com/assets/luma/banners/AdobeStock_570499457.jpg" alt="Banner Image" style="width: 100%; border-radius: 8px;">
</td>
</tr>
<tr>
<td width="33%" style="padding: 10px; text-align: center;">
<img src="<%= variables.x1 %>" alt="Column 1" style="width: 100%; height: auto;">
<p><%= variables.x2 %></p>
</td>
<td width="33%" style="padding: 10px; text-align: center;">
<img src="<%= variables.x4 %>" alt="Column 2" style="width: 100%; height: auto;">
<p><%= variables.x5 %></p>
</td>
<td width="33%" style="padding: 10px; text-align: center;">
<img src="<%= variables.x7 %>" alt="Column 3" style="width: 100%; height: auto;">
<p><%= variables.x8 %></p>
</td>
</tr>
</table>
</body>
This approach should address the issues related to both display: flex; and <div> styling in Outlook.
Best regards,
MEIT MEDIA (https://www.meitmedia.com)
Contact Us: infomeitmedia@gmail.com
Unfortunately still the same problem for the code which you recommend. I am using gmail not outlook
Hi @Michael_Soprano ,
Thank you for clarifying that you're facing this issue in Gmail. Gmail is generally more flexible with CSS compared to other email clients like Outlook, so it should be easier to narrow down the problem and fix the issue.
Try the following diagnostic steps:
- Send the email to your personal Gmail account or an alternate Gmail address. This can help isolate the issue from your office network or your system. Additionally, for easier diagnosis, you can send the copy of email to me at our below Gmail address.
Temporarily replace the src="<%= variables.x %>" in the image tag with a static image URL (e.g., src="https://your.image.url") to see if the image loads correctly. This is can help to narrow down if the variable causing image rendering issue.
- Access your Gmail account on a mobile device connected to a different network, like your mobile data or a public Wi-Fi network.
- Press F12 on your keyboard while viewing the email in Gmail to open Chrome’s Developer Tools. Click on the Console tab and refresh the page with the email open. Look for any errors or warnings, especially related to image loading or blocked content.
- Right-click on the broken image icon and select Inspect from the context menu. In the Elements tab, check the HTML code for the image, particularly the src attribute, to see if the image URL is correctly resolved.
- In the Developer Tools, switch to the Network tab and refresh the page again. Filter by "Img" to see the list of image requests. Check if the request for your image returns a successful status (200 OK) or an error.
This combined approach should help you effectively diagnose and narrow down the root cause of the problem.
Best regards,
MEIT MEDIA (https://www.meitmedia.com)
Contact Us: infomeitmedia@gmail.com
First and foremost thanks for you time!
- Send the email to your personal Gmail account or an alternate Gmail address. This can help isolate the issue from your office network or your system. Additionally, for easier diagnosis, you can send the copy of email to me at our below Gmail address.
Send to private email. Opened on another computer. Did not help.
I send this to your email
Temporarily replace the src="<%= variables.x %>" in the image tag with a static image URL (e.g., src="https://your.image.url") to see if the image loads correctly. This is can help to narrow down if the variable causing image rendering issue.
Send you 2 emails. First one is without "" and the second one is with "". The second with "" now worked. To not waste your time I promise that I have tested this multiple times and consult internally and before it did not work
- Access your Gmail account on a mobile device connected to a different network, like your mobile data or a public Wi-Fi network.
Strange thing but on mobile device with mobile data:
- the one with "" on img variables WORKED
- the one without "" on img did not worked
- Press F12 on your keyboard while viewing the email in Gmail to open Chrome’s Developer Tools. Click on the Console tab and refresh the page with the email open. Look for any errors or warnings, especially related to image loading or blocked content.
- Right-click on the broken image icon and select Inspect from the context menu. In the Elements tab, check the HTML code for the image, particularly the src attribute, to see if the image URL is correctly resolved.
When it did not work it changes the url:
- In the Developer Tools, switch to the Network tab and refresh the page again. Filter by "Img" to see the list of image requests. Check if the request for your image returns a successful status (200 OK) or an error.
Hi @Michael_Soprano ,
We've received your email, let me spent some time on it and soon I'll get back to you with my analysis.
Best regards,
MEIT MEDIA (https://www.meitmedia.com)
Contact Us: infomeitmedia@gmail.com
Related Conversations
