strange inline data uris with next 6

[notatestuser]

Hi @cyrilwanner this is a great idea, but having some issues getting it working. My inline images are being generated with data uris like this:

data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJkMzI1YWI2YzI3ZWEyYzg5NzRmNGMyYjQ5MDI2NGE4YS5wbmciOw==

which, when decoded, contains text content like this:

module.exports = __webpack_public_path__ + "d325ab6c27ea2c8974f4c2b490264a8a.png";

which clearly isn't an image. Is this an incompatibility with next 6 situation I'm encountering here?

Any help appreciated!

fyi. just using imagesFolder and imagesPublicPath config keys.

[notatestuser]

Same for non-inline images, they contain that text.

[cyrilwanner]

Hi @notatestuser
Thanks for your report, this is indeed very strange... Honestly, I didn't update my main projects to next 6 yet, but I'll do it this weekend/next week, so it could maybe have something to do with next 6.

But I now just set up a small new project with only next 6, this plugin and a few test images and everything is working as expected (for both inline and non-inline images, with and without the imagesFolder and imagesPublicPath configs).
So I think it could also be a combination of plugins which produces this strange issue.
Do you also have other plugins in your project? If yes, can you show me your next.config.js or if it is a public project even give me the repository link? And can you also show me a code snippet where you import and use the images in your component?
Thank you :)

[notatestuser]

Hey sure @cyrilwanner, thanks for researching! we do use a few plugins already, those are:

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withTranspile = require('@weco/next-plugin-transpile-modules');
const withSourceMaps = require('@zeit/next-source-maps');
const withOptimizedImages = require('next-optimized-images');
exports = module.exports = withPlugins([
  [withCss],
  [withTranspile],
  [withSourceMaps],
  [withOptimizedImages, {
    imagesFolder: 'images',
    imagesPublicPath: `${CDN_URL}/_next/static/images/`,
  }],
], {

we are using the plugin in two ways, one the normal way just in render():

<img
  src={require('./Logo/logo-en.svg')}
  alt={brand}
/>

and in styled-components:

const GraphicOK = styled.img.attrs({
  src: require('./Status/statusOk.gif'),
})`
  display: block;
  ...
`;

[notatestuser]

Wait, I think I might have found what is doing it-

config.module.rules.push({
  test: /\.(ico|gif|png|jpg|jpeg|svg|webp|eot|ttf|woff|otf)$/,
  use: [
    'file-loader',
  ],
});

let me remove this and see what happens.

[notatestuser]

Oops, it was the file-loader. we have quite a large next.config.js and it was hiding down at the bottom. sorry for the false alarm and I can confirm that it's now working as intended. 😄

There still seems to be an issue with a jest test breaking due to an image but that's a different topic.