无法使用 React + Hapi 渲染本地静态图像

Question

happiness@1.0.0 start 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☻► mntrRGB XYZ ? ☺ ↓ ♥ ) 9acs pAPPL ?? ☺ ?-lcms | ^ 2 | desc ? ^cprt ☺\ ♂wtpt ☺h ¶bkpt ☺| ¶rXYZ ☺? ¶gXYZ ☺? ¶bXYZ ☺? ¶rTRC ☺? @gTRC ☺? @bTRC ☺? @desc ♥c2 text FB XYZ ?? ☺ ?-XYZ ♥▬ ♥3 ☻?XYZ o? 8? ♥?XYZ b? ?? ↑?XYZ $? ☼? ??curv → ?☺?♥c♣k♂?►? §Q4!?)?2↑;?F♣Qw]?kpz♣???|?i?}???0???? C ♠♦♣♠♣♦♠♠♣♠♠ 3 | ► 4 | at Parser.pp.raise (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:4454:13) at Parser.getTokenFromCode (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:1147:10) at Parser.readToken (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:776:19) at Parser. (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:7214:20) at Parser.readToken (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:6011:22) at Parser.nextToken (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babylon\lib\index.js:766:19) at 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) at File.parse (C:\Users\Schrute\Documents\GitHub\happiness\node_modules\babel-core\lib\transformation\file\index.js: 517:15) at 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';。

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

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

无法使用 React + Hapi 渲染本地静态图像

Can't render a local static image using React + Hapi

javascript

node.js

reactjs

hapijs

hapijs-vision