Question

我有一个反应组件，我想在其中导入图像。图像与组件位于同一文件夹中所以我输入<img src={require('./hi.png')} />。但控制台显示错误：

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 ...

为什么？我做错了什么？

Answer 1

我也尝试使用

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

它显示require is unresolved function or module并抛出相同的错误，因为无法找到hi.png

但您可以按照以下方式使用它来解决问题

import hi  from "./hi.jpg";
<img src={hi} />

Answer 2

我认为你的文件夹项目树类似于你的服务器端是用Nodejs制作的，因为你的问题不清楚：

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

因此，我建议您使用静态文件夹并使用以下方法调用：

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

因此，将跟踪公共内部的所有内容，您可以使用以下方法回调这些图像：

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

没有必要使用要求，或类似的东西。当然，通过这种方式，您的代码可以更加有条理地与其他人一起为您服务。

但是，在你的情况下，require不起作用，因为可能你既没有设置你的webpack也没有设置npm安装了babel-loader。 Read more about loaders，下载并设置：

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

Answer 3

尝试以不同的方式导入和调用您的图像：

import hi from '/assets/images/hi.png'; 



    <div style={{ backgroud :`url(${hi})`}}>
    </div>

无法在react.js

3 个答案: