在 SSR React 应用程序中导入图像时出错:“SyntaxError:无效或意外的标记?PNG”

gol*_*nge 5 javascript parcel reactjs server-side-rendering parceljs

我正在尝试使用简单的快速服务器运行 SSR React (16.3.0) 应用程序。构建并运行后babel-node server.js出现有关导入 PNG 文件的错误:

\n\n

/home/dev/test/src/assets/bg.png:1\n(function (exports, require, module, __filename, __dirname) { \xef\xbf\xbdPNG\n ^

\n\n
SyntaxError: Invalid or unexpected token\n    at createScript (vm.js:80:10)\n    at Object.runInThisContext (vm.js:139:10)\n    at Module._compile (module.js:617:28)\n    at Module._extensions..js (module.js:664:10)\n    at Object.newLoader [as .js] (/home/dev/test/node_modules/pirates/lib/index.js:88:7)\n    at Module.load (module.js:566:32)\n    at tryModuleLoad (module.js:506:12)\n    at Function.Module._load (module.js:498:3)\n    at Module.require (module.js:597:17)\n    at require (internal/module.js:11:18)\n
Run Code Online (Sandbox Code Playgroud)\n\n

这是我的 server.js:

\n\n
import express from \'express\'\nimport React from \'react\'\nimport ReactDOMServer from \'react-dom/server\'\nimport path from \'path\'\n\nimport App from \'./src/components/App\'\n\nconst app = express()\nconst port = 4000\n\nconst HTMLShell = (html) => `\n  <!DOCTYPE html>\n  <html>\n      <head>\n          <meta charset="utf-8">\n          <meta name="viewport" content="width=device-width, initial-scale=1">\n          <title>SSR React App</title>\n      </head>\n      <body>\n          <div id="app">${html}</div>\n          <script src="./app.min.js"></script>\n      </body>\n  </html>`\n\napp.use(express.static(path.join(__dirname, \'dist\')))\n\napp.get(\'*\', (req, res) => {\n  let html = ReactDOMServer.renderToString(\n    <App />\n  )\n\n  res.send(HTMLShell(html))\n})\n\napp.listen(port, () => console.log(`Example app listening on port ${port}!`))\n
Run Code Online (Sandbox Code Playgroud)\n\n

对于捆绑,我正在使用 Parcel。如何导入图像而不出现此错误?

\n\n

编辑:\n图像以这种方式导入:

\n\n

import bgHeader from \'../assets/bg.png\'

\n