时间戳

首页 > 解决方案 > 使用 React/Webpack 加载图像

reactjs - 使用 React/Webpack 加载图像

问题描述

我设置了webpack加载png图像的规则：

   {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
    }

我在这里找到的：无法使用 webpack 加载 png 文件，意外字符

Webpack似乎工作正常，没有错误。因此，我尝试加载位于方法app_folder/public/images/pca内部的png 图像路径render：

  importAll = (r) => {
    return r.keys().map(r);
  }

  render() {
    const pca_images = this.importAll(require.context('../public/images/pca', 
    false, /\.(png|jpe?g|svg)$/));
      console.log('pca_images')
      console.log(pca_images)
...
}

当我启动应用程序时，我没有看到任何错误，但它pca_images是一个空数组。组件本身位于app_folder/views/. 我也尝试像这样直接加载图像：

 <img src={ require('../public/images/image1.png') } />

但是无论我指定什么路径，它都无法正常工作并给出错误。我需要从文件夹中加载所有图像app_folder/public/images/pca，而不仅仅是静态加载，因为我事先不知道图像的名称。任何建议将不胜感激。

标签： reactjsimagewebpack

解决方案

对我有用的解决方案是将规则添加到webpack.config.js：

{
    test: /\.(jpe?g|gif|png|svg)$/i,
    use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10000
      }
    }
  ]
}

我在这里找到的这条规则：ReactJS and images in public folder

然后我需要在终端中运行两个命令：

npm install url-loader --save-dev
npm install file-loader --save-dev

最后从文件夹加载（见问题，render方法）开始工作。

推荐阅读