Image files required through url-loader/file-loader are corrupt

I’m trying to require image files:

require('../images/marble.jpg')

My loader configuration looks like:

test: /\.(jpg|png)$/,
loader: 'url-loader',
query: {
    limit: 8192,
    name: 'images/[name].[ext]'
}

When I use image files (both png and jpg) over the limit, they are copied incorrectly. The output files are much bigger than the originals, and they are no longer correctly formatted images. They are still binary files, though, so it is difficult to tell what’s going wrong. (Images below the limit work fine.)

For example, I’m using a jpg that’s 61.9kb. the output log from webpack reports the file size correctly. However, the copied file is about 114kb and no browser or image viewer can open it.

(possibly related to #1668)

Author: Fantashit

1 thought on “Image files required through url-loader/file-loader are corrupt

  1. @brianchirls, I think I may have just stumbled across the same (?) problem as you in regards to corrupt JPG images.

    I also see this inflated file size effect on images in bundled distributions of my web application. For example, the original size of one arbitrary JPG file is 746KB but turns out being 1524KB in the bundled distribution folder. Similar to what you also observed, the URL paths to the images in my bundled web application are correct – it’s simply the images that aren’t loading because they’re corrupt.

    I should add that I’m also using webpack-dev-server, which actually has no problem in resolving the images and displaying the correctly in the unbundled development version of my web application.

    I might try construct a bare bones project to isolate this problem.

    Here’s my loader configuration in case it helps:

    {
      test: /.*/,
      loader: 'file?name=assets/[name].[ext]&context=./src/app/',
      include: [
        /assets[\\\/]images.+/,
        /assets[\\\/]data.+/
      ]
    }
    

Comments are closed.