无法在我的反应组件中检索图像

Question

我在编码方面很新，所以请放纵...我搜索了很多，但我没能解决我的问题:(

我想通过 html img 标签渲染我的图像。我看到最好的反应方式是导入我的图像。像这样：

import avatar from './avatar.png';

export default class Connection extends React.Component {
  render () {
      return (
        <div>
          {this.props.user.firstname}&nbsp;{this.props.user.lastname}
          &nbsp;<img src={avatar} className='img-circle' />
          &nbsp;&nbsp;&nbsp;<a href='#' onClick={this.props.logout}>Déconnexion</a>
        </div>
      );
  }
}

我使用以下 webpack 配置来加载这些图像：

module: {
    loaders: [
      { test: /\.jsx?$/, exclude: [/node_modules/], loader: 'babel' },
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader') },
      { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'file-loader?hash=sha512&digest=hex&name=[path][name]-[hash].[ext]' },
      { test: /\.(png|gif|jpe?g|svg|jpg)$/i, loader: 'url-loader?limit=10000' }
    ]
  }

我看到 webpack 设法加载了 jpg 或 png 文件，但是在显示它时，文件 generated/copied 似乎不可用（例如：/MyApp/avatar-50b93a2df8aec266d7c8c1c0f5719d1b.png 不可用可用）。

我使用 webpack 开发服务器，所以我没有看到我的文件被捆绑，也没有创建 dist 或 build 文件夹。

有解决我的问题的想法吗？

谢谢，

在 img 标签中使用 require 时出现以下错误：

找不到模块：错误：无法解析 'file' 或 'directory' ./avatar

我试图在 webpack 配置中获取扩展，但它没有解决任何问题:(

这是我的 webpack 配置中的 public 路径配置：

output: {
    path: path.join(__dirname, '/build'),
    publicPath: '/',
    filename: 'bundle.js'
  }

Answer 1

要使用 Webpack 加载图像，您需要执行以下操作：

<img src={require('./avatar.jpg'})/>

Webpack 爬取您的应用程序代码库，代码被捆绑到一个文件中，但文件不会保持相同的结构，通过调用 requireWebpack 将为您进行依赖管理，在这种情况下，文件将四处移动，代码将被注入，因此它指向它的捆绑位置。

Answer 2

你可以看看这篇来自 SurviveJS Book 的文章。 Load Images Chapter

无法在我的反应组件中检索图像

Cannot retrieve images in my react component

image

urlloader

reactjs

webpack