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

Question

我的React应用当前正在使用ReactDOMServer.renderToStaticMarkup来生成HTML电子邮件。

ReactDOMServer.renderToStaticMarkup的问题在于，它将小图像（12kb以下）从图像src URL转换为嵌入式图像。这导致图像具有不期望的附件。

如何配置ReactDOMServer.renderToStaticMarkup不内嵌（12kb）以下的小图像？

Answer 1

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

---

在不弹出的情况下做到这一点

• 您可以将它们放在public folder中，然后从那里使用它们。除了导入文件外，还可以这样引用：<img src={process.env.PUBLIC_URL + '/img/logo.png'} />

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