填坑记: Active Storage 图片在邮件中的显示问题
今天在发送 Newsletter 时,发现邮件中的图片破损无法显示,很奇怪,因为相关代码是照搬 rss 的生成代码的:
article.content.to_s
content 是富文本,所以 to_s 是 html 代码,但 rss 阅读器就可以显示图片,但邮件里却无法显示图片。
于是,我打开浏览器的开发者工具查看,发现了端倪:
rss 阅读器的图片地址是绝对地址,所以能正确解析:
rss-img
邮件里的地址是相对地址,所以解析到了邮箱服务商的主机:
newsletter-img
但代码一样,为什么结果不一样呢,随即我查看了博客生成的 feed 文件,发现生成的 img 地址也是相对地址:
feed-xml
所以,结果很明显,众多的 rss 阅读器自动对相对地址补充了主机信息,避免了类似的问题。
既然找到了问题,那么解决方案就是,直接修改 active storage blob 的 html 模版代码,添加主机信息即可:
于是,我打开浏览器的开发者工具查看,发现了端倪:
rss 阅读器的图片地址是绝对地址,所以能正确解析:

邮件里的地址是相对地址,所以解析到了邮箱服务商的主机:

但代码一样,为什么结果不一样呢,随即我查看了博客生成的 feed 文件,发现生成的 img 地址也是相对地址:

所以,结果很明显,众多的 rss 阅读器自动对相对地址补充了主机信息,避免了类似的问题。
既然找到了问题,那么解决方案就是,直接修改 active storage blob 的 html 模版代码,添加主机信息即可:
# 修改前: <%= image_tag url_for(blob) %> # 修改后: <%= image_tag "#{site_settings[:url]}#{url_for(blob)}" %>
完成。