Как отключить ReactDOMServer.renderToStaticMarkup для встраивания небольших изображений?

Question

Как отключить ReactDOMServer.renderToStaticMarkup для встраивания небольших изображений?

Приложение My React в настоящее время использует ReactDOMServer.renderToStaticMarkup генерировать электронные письма HTML.

У меня проблема с ReactDOMServer.renderToStaticMarkup заключается в том, что он преобразует небольшие изображения (до 12 КБ) из URL-адреса src изображения во встроенное изображение. Это приводит к тому, что изображения имеют вложения, что нежелательно.

Как я могу настроить ReactDOMServer.renderToStaticMarkup, чтобы не встроенные маленькие изображения в (12 КБ)?

0

reactjs webpack create-react-app react-dom react-dom-server

Источник

user149080 09 июл '18 в 18:14

1 ответ

Другие вопросы по тегам reactjs webpack create-react-app react-dom react-dom-server

user5939615 10 июл '18 в 13:37 2018-07-10 13:37 · Answer 1 · 2018-07-10 13:37

По тэгам я предполагаю, что вы используете create-react-app, Под капотом он использует url-loader который встраивает изображения размером менее 10 КБ. Вы можете извлечь конфигурацию 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';, Двойные восклицательные знаки в начале используются для игнорирования загрузчиков из конфигурации веб-пакета и file! означает использовать файл-загрузчик, который не делает вставку.