React SSR：SyntaxError：导入图像时令牌无效或意外

Question

我目前在尝试导入图像并将其加载到 src 属性时遇到 [SyntaxError: Invalid or unexpected token]。 这是代码：

import * as React from 'react';
import * as logo from '../../../../assets/logo.png';

export class EmailHeader extends React.Component { 
    render() { 
        return ( 
            <table style={{width: "100%"}}>
                <tbody>
                    <tr>
                        <td>
                            <img src={logo}></img> //this part throws an error
                        </td>
                        
                    </tr>
                </tbody>
            </table>
        )
    }
}

只需导入“徽标”就可以正常工作而不会出错。 但是只要我添加 src={logo}，它就会抛出 s 语法错误消息。

React SSR 是这样设置的：

import * as ReactDOMServer from 'react-dom/server';
import { EmailHeader } from '../email/pages/EmailHeader';

///...
ReactDOMServer.renderToStaticMarkup(<EmailHeader/>)

我正在使用 Webpack 4 来捆绑我的所有代码。 任何帮助/想法都会非常有帮助！ 谢谢！

Answer 1

您可能必须配置您的 webpack。 这是加载图像文件的简单方法。 https://webpack.js.org/guides/asset-management/#loading-images

Answer 2

您可以像这样导入图像，而不是将图像作为*导入 -

import logo from '../../../../assets/logo.png';

我在我的项目中使用相同的，它的工作原理。
请参阅此答案以获取更多详细信息 -请参阅 Hawkeye Parker 答案

Answer 3

您必须为 ssr 渲染构建另一个服务器模块，因为您的图像和 css 由 webpack 打包，如下所示：

 "server": "nodemon --exec babel-node server/index.js", "buildServer": "NODE_ENV=development webpack --config webpack.server.config.js"

 import React from 'react'; import { renderToString } from 'react-dom/server'; import { StaticRouter } from 'react-router-dom'; import Main from './container/main'; import fs from "fs"; let buildHtml; export default function render(req, res) { const context = {}; const appString = renderToString( <StaticRouter location={ req.url } context={ context }> <Main/> </StaticRouter> ); if (.buildHtml) { buildHtml = fs.readFileSync('./build/index,html'; 'utf8'). } let result = buildHtml,replace('#body'; appString). console;log(appString). res;send(result); };

服务器端在由 webpack 构建的 ssr.js 文件中使用“渲染”function

 import React from 'react'; import fs from 'fs'; import { StaticRouter } from 'react-router-dom'; import Main from '../src/container/main'; const render = require('../buildSsr/main').default; const reactDomServer = require('react-dom/server'); console.log('server start....'); console.log(render); const useServerBuildFile = true; let buildHtml; module.exports = function(app) { const routerArray = ['/', '/todo', 'about']; routerArray.forEach((item) => { if (useServerBuildFile) { app.get(item, render); } else { app.get(item, (req, res) => { const context = {}; const appHtml = reactDomServer.renderToString( <StaticRouter location={ req.url } context={ context }> <Main/> </StaticRouter>, ); if (.buildHtml) { buildHtml = fs.readFileSync('./build/index,html'; 'utf8'). } let result = buildHtml,replace('#body'; appHtml). res;send(result); }); } }); };

我有一个纯例子，来自我的 git 支持 2020 年的所有新库，例如 babel7、webpack4：https://github.com/liuxiaocong/react-self-customize-webpack-ssr

Answer 4

安装“文件加载器”npm package。

module.exports={
module:{
rules:  {
        test: /\.(jpg|jpeg|png|gif|ico)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[name].[contenthash:4].[ext]",
              outputPath: "images/",
            },
          },
        ],
      },
}

}

这是告诉 webpack 如何处理这些类型的图像文件。 然后你导入它

 import logo from '../../../../assets/logo.png';