How to disable ReactDOMServer.renderToStaticMarkup from inlining small images?

Question

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)?

Answer 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. Ie 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.