Email Marketing Tool

JdeVries
Participant

Missing images when saving to HTML

Résolue

Hi all,
Thanks to other tips on the forum, I used to successfully save my email newsletters to HTML by clicking preview -> copy sharable link -> and then save the page as HTML.
Unfortunately, this doesn't seem to work anymore. When I try to save it, my images are missing from the HTML. Does anyone know the solution?

A bit of background info: occasionally, we promote our newsletters through third-party advertising, and they need HTML files of our newsletters to do so.

0 Votes
2 Solutions acceptées
Jnix284
Solution
Au panthéon de la communauté | Partenaire solutions Elite
Au panthéon de la communauté | Partenaire solutions Elite

Missing images when saving to HTML

Résolue

Hi @JdeVries thank you for all of the info and code, it's very helpful!

 

I'm not able to view the preview without access to your HubSpot account - although this isn't necessary as I've isolated the change that's caused the issue.

 

In your previous newsletters, the file source is using the full URL to the image (parameters removed):

 

https://f.hubspotusercontent30.net/hub/6887881/hubfs/disguise-london-roevisual-led-xr-studio.jpg

  

In your new newsletters, the file source is relative:

 

newsletter_files/Obsidian%2520banner_002.webp

  

and is including responsive variants:

"newsletter_files/Obsidian%2520banner_003.webp 600w, newsletter_files/Obsidian%20banner.webp 1200w"

 

I don't know if this is happening because of how you're selecting different images for different device sizes or if there was a change in HubSpot from using the full URL.

 

If you can't insert the image on the front-end of the email with the full URL, you would need to open your HubSpot Files, copy the image URL and replace the relative path in the HTML with the full URL path.

 

Your original email has access to your HubSpot Files, the external source newsletter using the HTML doesn't.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

Voir la solution dans l'envoi d'origine

0 Votes
aviafriat26
Solution
Participant | Partenaire solutions Diamond
Participant | Partenaire solutions Diamond

Missing images when saving to HTML

Résolue

Hi @JdeVries,

 

It appears the issue lies in the image URLs. In the problematic email, the src attribute uses a local path which might not be accessible in all viewing contexts.

 

Here’s how you can fix it:

Current Code with Issue:

<img src="newsletter_files/Obsidian%2520banner_002.webp">

 

Corrected Code:

 

Ensure the src attribute points to an absolute URL, similar to the successful example you shared. This will help email clients locate and display the image correctly.

 

If you have any further questions or need more help, feel free to ask!

Avi Afriat

Voir la solution dans l'envoi d'origine

7 Réponses
aviafriat26
Solution
Participant | Partenaire solutions Diamond
Participant | Partenaire solutions Diamond

Missing images when saving to HTML

Résolue

Hi @JdeVries,

 

It appears the issue lies in the image URLs. In the problematic email, the src attribute uses a local path which might not be accessible in all viewing contexts.

 

Here’s how you can fix it:

Current Code with Issue:

<img src="newsletter_files/Obsidian%2520banner_002.webp">

 

Corrected Code:

 

Ensure the src attribute points to an absolute URL, similar to the successful example you shared. This will help email clients locate and display the image correctly.

 

If you have any further questions or need more help, feel free to ask!

Avi Afriat
PamCotton
Gestionnaire de communauté
Gestionnaire de communauté

Missing images when saving to HTML

Résolue

Hey @JdeVries, thank you for posting in our Community!

 

I would recommend ensuring that the image URLs in your newsletter HTML code are correct and accessible. Sometimes, if the image URLs are incorrect or expired, the images won't display.

 

To our top experts, @Jnix284 and @aviafriat26 any recommendations for @JdeVries matter?

 

Thank you,

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




Jnix284
Au panthéon de la communauté | Partenaire solutions Elite
Au panthéon de la communauté | Partenaire solutions Elite

Missing images when saving to HTML

Résolue

@JdeVries in the HTML code, are you able to see the image URL? or is it omitting it completely?

 

Can you share a snippet of the HTML from an email that had images successfully and one that doesn't?


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Votes
JdeVries
Participant

Missing images when saving to HTML

Résolue

Hi @Jnix284
I indeed get the feeling something goes wrong with the link of the images.

This is a piece of the HTML where the main banner is supposed to be:
<td align="center" valign="top" style="border-collapse:collapse; mso-line-height-rule:exactly; font-family:Arial, sans-serif; color:#23496d; word-break:break-word; text-align:center; padding:0px; font-size:0px">
<a href="https://www.roevisual.com/nl-en/obsidian?language=en" target="_blank" style="color:#00a4bd; mso-line-height-rule:exactly" data-hs-link-id="0">
<img alt="Obsidian banner" src="newsletter_files/Obsidian%2520banner_002.webp" style="outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; border:none; max-width:100%; font-size:16px" width="600" align="middle" srcset="newsletter_files/Obsidian%2520banner_003.webp 600w, newsletter_files/Obsidian%20banner.webp 1200w" sizes="(max-width: 600px) 100vw, 600px">

This is how the banner looks in the preview when I open the shareable link:
<img alt="Obsidian banner" src="https://6887881.fs1.hubspotusercontent-na1.net/hub/6887881/hubfs/Obsidian%20banner.jpg?width=1200&am..." style="outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; border:none; max-width:100%; font-size:16px" width="600" align="middle" srcset="https://6887881.fs1.hubspotusercontent-na1.net/hub/6887881/hubfs/Obsidian%20banner.jpg?upscale=true&... 600w, https://6887881.fs1.hubspotusercontent-na1.net/hub/6887881/hubfs/Obsidian%20banner.jpg?upscale=true&... 1200w" sizes="(max-width: 600px) 100vw, 600px">

 

This is the shareable link to the newsletter if you want to view the HTML code yourself.

This is of a previous newsletter:

<img alt="disguise-london-roevisual-led-xr-studio" src="https://f.hubspotusercontent30.net/hub/6887881/hubfs/disguise-london-roevisual-led-xr-studio.jpg?wid..." style="outline:none; text-decoration:none; -ms-interpolation-mode:bicubic; border:none; max-width:100%; font-size:16px" width="600" align="middle">

Thanks a lot for your time, much appreciated.

 

 

0 Votes
Jnix284
Solution
Au panthéon de la communauté | Partenaire solutions Elite
Au panthéon de la communauté | Partenaire solutions Elite

Missing images when saving to HTML

Résolue

Hi @JdeVries thank you for all of the info and code, it's very helpful!

 

I'm not able to view the preview without access to your HubSpot account - although this isn't necessary as I've isolated the change that's caused the issue.

 

In your previous newsletters, the file source is using the full URL to the image (parameters removed):

 

https://f.hubspotusercontent30.net/hub/6887881/hubfs/disguise-london-roevisual-led-xr-studio.jpg

  

In your new newsletters, the file source is relative:

 

newsletter_files/Obsidian%2520banner_002.webp

  

and is including responsive variants:

"newsletter_files/Obsidian%2520banner_003.webp 600w, newsletter_files/Obsidian%20banner.webp 1200w"

 

I don't know if this is happening because of how you're selecting different images for different device sizes or if there was a change in HubSpot from using the full URL.

 

If you can't insert the image on the front-end of the email with the full URL, you would need to open your HubSpot Files, copy the image URL and replace the relative path in the HTML with the full URL path.

 

Your original email has access to your HubSpot Files, the external source newsletter using the HTML doesn't.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Votes
JdeVries
Participant

Missing images when saving to HTML

Résolue

Thanks a lot, this will help provide the right kind of file for the advertising. I hope next time the previous simple solution will work again, though 😉

0 Votes
Jnix284
Au panthéon de la communauté | Partenaire solutions Elite
Au panthéon de la communauté | Partenaire solutions Elite

Missing images when saving to HTML

Résolue

You're welcome @JdeVries, I wish ther was an easier fix, glad this workaround will work for now!

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin