如何禁用内联小图像的ReactDOMServer.renderToStaticMarkup？

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.