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

Question

happiness@1.0.0 start C:\\Users\\Schrute\\Documents\\GitHub\\happiness node server.js

Server running at : http://localhost:5000 Debug: internal, implementation, error SyntaxError: C:/Users/Schrute/Documents/GitHub/happiness/node_src/views/wiam.jpg: Unexpected character '?' (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$5.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)

Here's the faulty snippet of code.

'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;

Note that I use React views throught routes with the Vision engine ( https://www.npmjs.com/package/hapi-react )

Answer 1

I am guessing the problem is happening due to this line: import wiam from './wiam.jpg'; .

Node does not know how to import image files. In fact, it can only import JS modules. Not to be confused with bundled client side code which can be configured to deal with such import statements - ie with webpack's file-loader .

In any case, in the following statement - <img src={wiam} /> - src attribute expects a string - either a URL that points to an image file or a base64 encoded image.