无法使用React Hapi渲染局部静态图像

Question

happiness@1.0.0启动C:\Users\Schrute\Documents\GitHub\happiness节点服务器。js

运行在以下位置的服务器：http://localhost:5000调试：内部、实现、错误语法错误：C:/Users/Schrute/Documents/GitHub/happiness/node_src/views/wiam。jpg:意外字符“？”(1:0)

1|？？？？►JFIF·☺？？？Photoshop 3.0 8BIM♦♦？······························································································································································哈萨克斯坦的ICC_PROFILE，哈萨克斯坦的XYZ？☺ ↓ ♥ ) 9acs pAPPL？？lcms|^2|desc？^cprt^\♂wtpt^h^bkpt^|^rXYZ^？？？？ rTRC@gTRC？@bTRC？@desc♥c2文本FB XYZ？？？-XYZ♥♥3？XYZ o？8个？♥？XYZ b？？？↑？XYZ$？？？？曲线→？？♥c k♂？►？§四！？）？2↑；？[Qw]？KPZ？？|？我？}？？？0？？？？C ♠♦♣♠♣♦♠♠♣♠♠ 3|►4|在Parser.pp$5.raise（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\巴比伦\lib\index.js:4454： 13）在Parser.getTokenFromCode（C：\用户\在Parser.read令牌（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\巴比伦\lib\index.js:1147： 10）在解析器上。（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\Babylan\lib\index.js:7214： 20）在Parser.read令牌（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\Babylan\lib\index.js:6011： 22）在Parser.next令牌（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\Babylan\lib\index.js:766： 19）在Parser.parse（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\Babylan\lib\index.js:1672： 10）在解析（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\Babylan\lib\<-PLHD-14/>： 37）在File.parse（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\Babel-core\lib\转换\file\index.js： 517:15）在File.parseCode（C：\用户\Schrute\Documents\GitHub\幸福\node_modules\Babel-core\lib\转换\file\index. js： 602:20）

这是错误的代码片段。

'use strict';

import React, { Component } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {GridList, GridTile} from 'material-ui/GridList';
import wiam from './wiam.jpg';
injectTapEventPlugin();

class App extends Component {

render(){
    return (
        <div className="App">
            <MuiThemeProvider>
                <div>
                    <GridList cellHeight={100}>
                        {this.props.data.map((cat) => (
                        <GridTile key={cat.photo} title={cat.title}>
                            {console.log(cat.photo)}
                            <img src={cat.photo} alt={cat.photo}/>
                        </GridTile>))}
                        <GridTile key="wiam.jpg" title={process.env.PUBLIC_URL}>

                            <img src={wiam} />

                        </GridTile>
                    </GridList>
                </div>
            </MuiThemeProvider>
        </div>
    );
}
}

module.exports = App;

请注意，我使用Vision engine（https://www.npmjs.com/package/hapi-react )

Answer 1

我猜问题发生是由于这一行：从'./wiam.jpg'；导入wiam。

节点不知道如何导入图像文件。实际上，它只能导入JS模块。不要与捆绑的客户端代码混淆，这些代码可以配置为处理这样的导入语句-即webpack的file-loader。

在任何情况下，在以下语句中-