Bild kann nicht in react.js

Question

importiert werden Ich habe eine Reaktionskomponente und ich möchte ein Bild darin importieren. Das Bild befindet sich im selben Ordner wie die Komponente Also gebe ich <img src={require('./hi.png')} /> ein. Aber die Konsole zeigt einen Fehler:

Uncaught Error: Cannot find module "./hi.png" 
    at webpackMissingModule (bundle.js:46105) 
    at MainNavigationBar.render (bundle.js:46105) 
    at bundle.js:15841 
    at measureLifeCyclePerf (bundle.js:15120) 
    at ... 

Warum ist das? Was mache ich falsch?

Answer 1

Ich habe auch versucht

<img src={require('./hi.png')} /> 

Es zeigt require is unresolved function or module und führt den gleichen Fehler wie nicht in der Lage zu finden

hi.png zu verwenden, aber man kann es wie folgt um das Problem zu lösen verwenden

Answer 2

Ich werde ablehnen, dass Sie Ordner Projektbaum ist ähnlich, und Ihre Server-Seite wurde mit Nodejs gemacht, denn es war nicht klar in Ihrer Frage:

.projectFolder 
|--.client 
| |--.components 
| |--bundle.js 
| |--index.js 
| |routes.js 
| 
|--.node modules 
|--.server 
    |--.public 
    | |--.assets 
    |  |--.images 
    |  | |--hi.png 
    |  | 
    |  |--.css 
    | 
    |--index.html 
    |--index.js 

Daher rate ich Ihnen, einen statischen Ordner zu verwenden und diese mit Hilfe rufen:

app.use(express.static(path.join(__dirname, 'public')));.

So wird alles in der Öffentlichkeit verfolgt werden und Sie können diese Bild mit nur Rückruf:

<img src={'/assets/images/hi.png'} width="150px" className="lateral-margin" />

nicht die Notwendigkeit der Verwendung mit erfordern, oder so etwas. Sicher, auf diese Weise bleibt Ihr Code für andere und auch für Sie organisierter.

Allerdings benötigt in Ihrem Fall nicht funktioniert, weil Sie wahrscheinlich weder Ihr Webpack noch npm installiert babel-loader. Read more about loaders, herunterladen und legen Sie es mit:

module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['es2015'] 
     } 
    } 
    ] 
}