Встроенные изображения с помощью url-загрузчика для приложения SSR React - PullRequest
Новая
       89

Встроенные изображения с помощью url-загрузчика для приложения SSR React

0 голосов
/ 26 апреля 2019

Я добавил SSR в приложение create-реагировать. Он работает нормально, но у меня есть проблемы с изображениями меньшего размера, которые CRA встроил бы, но renderToString все еще думает, что это файл на диске, поэтому он будет 404 при запуске версии SSR.

Я полагаю, что моя конфигурация для настройки сервера SSR неверна, но я не уверен, как добавить url-загрузчик, и если это действительно url-загрузчик, я должен использовать.

Я загружаю сервер с этим конфигом. Может кто-нибудь, пожалуйста, помогите мне, чтобы это и renderToString также встроенные маленькие изображения? 

const md5File = require('md5-file');
const path = require('path');

const ignoreStyles = require('ignore-styles');
const register = ignoreStyles.default;

const extensions = ['.gif', '.jpeg', '.jpg', '.png', '.svg'];

register(ignoreStyles.DEFAULT_EXTENSIONS, (mod, filename) => {
    if (!extensions.find(f => filename.endsWith(f))) {
        // If we find a style
        return ignoreStyles.noOp();
    } else {
        // If we find an image
        const hash = md5File.sync(filename).slice(0, 8);
        const bn = path.basename(filename).replace(/(\.\w{3})$/, `.${hash}$1`);

        mod.exports = `/static/media/${bn}`;
    }
});

require('@babel/polyfill');
require('@babel/register')({
    ignore: [/\/(build|node_modules)\//],
    presets: ['@babel/preset-env', '@babel/preset-react'],
    plugins: [
        '@babel/plugin-syntax-dynamic-import',
        'dynamic-import-node',
        'react-loadable/babel'
    ]
});

require('./server');

Я тоже в порядке, отключив встроенную функцию в клиентском приложении, но я бы предпочел не извлекать ее, поэтому я тоже не уверен, как это исправить.

...