Question

我想在本地加载图像，图像文件位于jsx文件的同一文件夹中。 webpack.config.js如下所示：

path = require('path');

module.exports = {
  context: __dirname,
  entry: "./app/entry.jsx,
  output: {
    path: path.join(__dirname, 'lib'),
    filename: "bundle.js",
    devtoolModuleFilenameTemplate: '[resourcePath]',
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader?root=."
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'url?limit=10000!img?progressive=true'
      }
    ]
  },
  devtool: 'source-map',
  resolve: {
    extensions: ["", ".js", ".jsx" ]
  }
};

和jsx是这样的

var loadingImg = require('url!img!./loading.gif');

控制台中显示的错误是：

ERROR in Loader app/node_modules/url/url.js didn't return a function
 @ app/components/session/login.jsx 5:17-49

我应该如何加载此图片？

Answer 1

在你的webpack配置文件中，没有什么东西对我不正确。我会看一下你在代码中调用图片的方式，看起来不对我。我不确定你在哪里尝试使用代码，但你可以做类似的事情;

<img src={require("../../images/some-filepath/some-image.png")} />

或：

<Image source={{uri: '../../images/some-filepath/some-image.png'}} />

如果你想看一下，我确实使用image-webpack-loader制作了tutorial a while ago。

无论如何，希望这有帮助！

Webpack img-loader无法加载图片

1 个答案: