Email Marketing Tool

JdeVries
参加者

Missing images when saving to HTML

解決

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 いいね!
2件の承認済みベストアンサー
Jnix284
解決策
殿堂入り

Missing images when saving to HTML

解決

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

元の投稿で解決策を見る

0 いいね!
aviafriat26
解決策
参加者 | Diamond Partner
参加者 | Diamond Partner

Missing images when saving to HTML

解決

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

元の投稿で解決策を見る

7件の返信
aviafriat26
解決策
参加者 | Diamond Partner
参加者 | Diamond Partner

Missing images when saving to HTML

解決

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
コミュニティーマネージャー
コミュニティーマネージャー

Missing images when saving to HTML

解決

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
殿堂入り

Missing images when saving to HTML

解決

@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
0 いいね!
JdeVries
参加者

Missing images when saving to HTML

解決

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 いいね!
Jnix284
解決策
殿堂入り

Missing images when saving to HTML

解決

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
0 いいね!
JdeVries
参加者

Missing images when saving to HTML

解決

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 いいね!
Jnix284
殿堂入り

Missing images when saving to HTML

解決

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