0

I have some problems importing jpg images with webpack and url-loader. Here's my webpack config:

const common = {
  entry: path.join(PATHS.src, 'index.tsx'),
  output: {
    path: PATHS.build,
    filename: 'bundle.js',
  },

  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react']
          }
        }
      },
      {
        test: /\.(png|jpg|gif|woff|woff2|ttf|mp3)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1000000
            }
          }
        ]
      }
    ],
  }
};

And i try to import jpg image like this:import * as map from '../../../i/map.jpg'; And i got an error here from webpack: TS2307: Cannot find module '../../../i/map.jpg'. Still, the applications is working after the build, and "corrupted" image is displayed. Btw, a png image from the same folder as jpg image working fine, no error during build. Can you help me? What am i doing wrong?

1 Answer 1

0

well i didn't manage to solve the problem with importing jpg image, but i found a solution replacing import with require. Still I have no idea what wrong with my config or webpack itself.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.