React + SSR + webpack + node, неожиданный токен �PNG

У меня веб-приложение реагирует на функцию рендеринга на стороне сервера, работающую на сервере узла. Я использую локальные изображения из каталога ресурсов (как показано ниже:

<img src = {require('../../../assets/img/image.png')} width = "400" />

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

(function (exports, require, module, __filename, __dirname) { �PNG
SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:605:28)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)

Я пробовал использовать загрузчик файлов, загрузчик URL, но ничего не работает. Конфигурация webpack для файлового загрузчика:

module: {
    rules: [
    {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/
    },
    {
        test: /\.(png|jpg|gif)$/,
        use: [
        {
            loader: 'file-loader',
            options: {}
        }
        ]
    }
    ]
},

Может ли кто-нибудь сообщить мне, в чем проблема. Или есть другой способ использовать локальный образ, отличный от require(). Любая помощь будет оценена по достоинству.

Спасибо ~ Сатиш

тебе удалось это решить?

danish.ahmad 02.04.2019 15:48

То же самое для меня, любое решение? Я установил для emitFile значение false, но все равно не помогает ...

Max 15.07.2020 20:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
8
2
404
0

Другие вопросы по теме