JPG largely not working

[Mikeysauce]

JPG files seem to be broken in version 1.4.1. I have found that some files work fine, but for example 5 entirely random jpg files which I tested from unsplash.com failed to display. The image does get copied to the .next/images folder as per the default config, but the image is malformed and unreadable, both in the browser and on my local system.

I have tried the same setup in windows 10 as well as mac high sierra, using both nextjs 5.1 and 6.1.

My base next.config.js is as follows:

const { withPlugins, optional } = require('next-compose-plugins');
const images = require('next-optimized-images');

module.exports = withPlugins([
  [images, {
    optimizeImagesInDev: true,
  }],
], {
  webpack: (config) => {
    // Add rules for styled-components linting, this will allow
    // us to lint styles as part of the build
    config.module.rules.push({
      test: /\.js?/,
      loader: 'stylelint-custom-processor-loader',
      exclude: /node_modules/,
      options: {
        emitWarning: false
      },
    });

    // IMPORTANT: the config must be returned
    return config;
  }
});

Test Case:

import React from 'react';
import Icon from '../static/high_low_big.svg?sprite';
import Image from '../static/nathan-peterson-792622-unsplash.jpg?original';

export default () => {
  const imgStyle = {
    maxWidth: '100%',
  };
  return (
    <div>
      <Icon/> // SVG works as expected
      <img style={imgStyle} src={Image} /> // Image does not render, makes no difference if I change `?original` to `?include`, or remove it at all.
    </div>
  );
};

The path which I am referencing is correctly being updated to point to /_next/static/images/nathan-peterson-792622-unsplash-b7e78930f997020df3638a54a25421f8.jpg, but this image is malformed and not displaying.

[cyrilwanner]

Hi @Mikeysauce, thank you for the detailed issue.

So far, I never had problems with JPG images from unsplash, I always used them for testing this package.

mozjpeg (which is used for optimizing the JPG images) requires libpng16 which may not be installed on every system. To check if this could have caused this problem, can you please re-install the node modules in your project and look out for these binary tests and check if they are successful:

If they are successful, can you provide me one of the images which is causing the problem for you? Maybe the original one and the corrupt one which got copied into the .next folder so I can investigate the problem better :) Thank you!

[Mikeysauce]

Hi Cyril, thanks for the swift reply. I cleared out my node_modules and have tested again and still see the same behaviour. This is one of the images which is causing problems. https://unsplash.com/photos/LaTGDnc27ys

Here is the npm install feedback after clearing out node_modules:

[cyrilwanner]

Hi @Mikeysauce

First of all, I'm very sorry for the late response. I was on vacation and didn't take my laptop with me. But I'm back now and will invest more time into this issue.

I tried it with your image first and it worked for me.
But there is something which I just saw in your next.config.js which could produce the error. In the webpack config for stylelint-custom-processor-loader, you have the following file pattern: test: /\.js?/, and I think this can also match the .jpg extension as it doesn't have the end modifier ($) in it. And the stylelint loader then handles the jpg file as a js file which ends up in an invalid image. So to test this, could you please try to change the file pattern of this loader to /\.js?$/ or remove it completely for testing?

[Mikeysauce]

Hi @cyrilwanner,

Firstly you have nothing to apologise for, I didn't pay anything for this plugin.

Secondly, your suggestion was right on the money and I shouldn't have included it when testing. I swapped the modifier to /\.js?$/ and it's working great.

Thanks for the great work on this.