react-email: [BUG] background image quoted url turned into html entities

Some older email clients only resepect background image urls if the url is quoted (ie. background-image: url(./foo.jpg) will not work, but background-image: url("./foo.jpg") will). When using quoted urls in provided styles, the output from email export replaces either double quotes " or single quotes ' with html entities (" and ' respectively), breaking the inline style.

Steps to reproduce:

  • create a template with an inline style that contains a style that includes backgroundImage with a quoted url. eg. backgroundImage: "url('path/to/my/image.jpg')"
  • run email export
  • note that style is replaced with background-image: url('path/to/my/image.jpg')

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 2
  • Comments: 21 (9 by maintainers)

Most upvoted comments

I think the string template literal that you are using is causing the problem which I understand, it will be used when we have to use variables in a string. I only tested using simple quote outside url and double quote for enclosing the url which does not break the output. Now I will try to reproduce bug using template literal the way you mentioned in above comment.