Question

happiness@1.0.0启动C：\ Users \ Schrute \ Documents \ GitHub \ happiness node server.js

运行于：http://localhost:5000的服务器调试：内部，实现，错误 SyntaxError：C：/Users/Schrute/Documents/GitHub/happiness/node_src/views/wiam.jpg：意外字符'？' （1：0）

1 | ???? ►JFIF☺☻☺☺?? ？Photoshop 3.0 8BIM♦♦？∟☻g¶uH7kKKuGKb3aEebAxn9b∟☻（bFBMD01000abe030000bc2d000015570000 5e590000395d0000ea75000056c2000021cd000030d400009bdb0000f8680100 ??☻∟ICC_PROFILE☺☺☺☺lcms☻►mntrRGBXYZ？ ☺↓♥）9acs pAPPL ?? ☺？-lcms | ^ 2 | desc？ ^ cprt☺\♂wtpt☺h¶bkpt☺| ¶rXYZ☺？ ¶gXYZ☺？ ¶bXYZ☺？ ¶rTRC☺？ @gTRC☺？ @bTRC ☺？ @desc♥c2文字FB XYZ ?? ☺？-XYZ♥▬♥3☻？XYZ o？ 8？ ♥？XYZ b？ ?? ↑？XYZ $？ ☼？ ?? curv→？☺？♥c♣k♂？►？ §Q4）2↑;！？？？？？？F的♣QW] KPZ♣??? | I} ... 0 ???? C♠♦♣♠♣♦♠♠♣♠♠ 3 | ► 4 | 在Parser.pp $ 5.raise（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babylon \ lib \ index.js：4454：13）在Parser.getTokenFromCode（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babylon \ lib \ index.js：1147：10）在Parser.readToken（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babylon \ lib \ index.js：776：19）在Parser。（C：\ Users \用户的Schrute \文件\ GitHub的\幸福\ node_modules \巴比伦\ lib中\ index.js：7214：20）在Parser.readToken（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babylon \ lib \ index.js：6011：22）在Parser.nextToken（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babylon \ lib \ index.js：766：19）在Parser.parse（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babylon \ lib \ index.js：1672：10） at parse（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babylon \ lib \ index.js：7246：37）在File.parse（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babel-core \ lib \ transformation \ file \ index.js： 517：15）在File.parseCode（C：\ Users \ Schrute \ Documents \ GitHub \ happiness \ node_modules \ babel-core \ lib \ transformation \ 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引擎（https://www.npmjs.com/package/hapi-react）

的路径的React视图

Answer 1

我猜这个问题正在发生，因为这行：import wiam from './wiam.jpg';。

Node不知道如何导入图像文件。实际上，它只能导入JS模块。不要与可以配置为处理此类import语句的捆绑客户端代码相混淆 - 即使用webpack＆＃39; s file-loader。

在任何情况下，在以下语句中 - <img src={wiam} /> - src属性需要一个字符串 - 指向图像文件的URL或base64编码的图像。

无法使用React + Hapi

1 个答案: