無法呈現使用陣營+哈啤本地靜態圖像

[email protected] start C:\Users\Schrute\Documents\GitHub\happiness node server.js無法呈現使用陣營+哈啤本地靜態圖像

服務器在運行：http://localhost:5000 調試：內部，執行，錯誤語法錯誤：C：/用戶/的Schrute /文檔/ GitHub上/幸福/ node_src /意見/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$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)

這是錯誤的代碼片段。

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

請注意，我用的意見作出反應與視覺引擎（https://www.npmjs.com/package/hapi-react）

來源

2017-09-21 Crabos

我猜問題是發生throught路線由於這一行：import wiam from './wiam.jpg';。

節點不知道如何導入圖像文件。實際上，它只能導入JS模塊。不要與捆綁的客戶端代碼混淆，客戶端代碼可以配置爲處理這種import語句 - 即與webpack的file-loader。

在任何情況下，在以下語句中 - <img src={wiam} /> - src屬性需要一個字符串 - 一個指向圖像文件或base64編碼圖像的URL。

來源

2017-09-23 09:32:38

無法呈現使用陣營+哈啤本地靜態圖像

回答

相關問題