0

我的 React 应用程序当前ReactDOMServer.renderToStaticMarkup用于生成 HTML 电子邮件。

我遇到的问题ReactDOMServer.renderToStaticMarkup是它将小图像（小于 12kb）从图像 src URL 转换为内联图像。这导致图像具有不希望的附件。

如何将 ReactDOMServer.renderToStaticMarkup 配置为不在（12kb）下内联小图像？

4

1 回答 1

1

通过我假设您正在使用的标签create-react-app。在引擎盖下，它使用 url-loader内联小于 10kb 的图像。您可以弹出 webpack 配置并增加阈值或替换url-loader为file-loader.

不弹出的方法

  • 您可以将它们放在公共文件夹中并从那里使用它们。可以像这样引用它，而不是导入文件：<img src={process.env.PUBLIC_URL + '/img/logo.png'} />

  • 直接在导入中指定文件加载器。即代替import imageUrl from './image.png';使用import imageUrl from '!!file!./image.png';。开头的双感叹号用于忽略 webpack 配置file!中的加载器，表示使用文件加载器，它不做内联。

于 2018-07-10T13:37:25.307 回答