0

My React app is currently using ReactDOMServer.renderToStaticMarkup to generate HTML emails.

The problem I'm having with ReactDOMServer.renderToStaticMarkup is that it converts small images (under 12kb) from a image src URL to an inline image. This is resulting in images having attachments which is undesirable.

How can I configure ReactDOMServer.renderToStaticMarkup to not inline small images under (12kb)?

halfer
  • 19,824
  • 17
  • 99
  • 186
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012

1 Answers1

1

By the tags i assume you are using create-react-app. Under the hood it uses url-loader which inlines images smaller than 10kb. You can eject webpack config and either increase the threshold or replace url-loader with file-loader.

Ways to do it without ejecting

  • You can put them in a public folder and use them from there. Instead of importing the file it can be referenced like that: <img src={process.env.PUBLIC_URL + '/img/logo.png'} />

  • Specify file loader directly in the import. I.e. instead of import imageUrl from './image.png'; use import imageUrl from '!!file!./image.png';. Double exclamation points at the start are used to ignore loaders from webpack config and file! means use file-loader, which doesn't do inlining.

eldarg
  • 308
  • 2
  • 7