Images are not served: 404 errors

[kirill-konshin]

I have following next.config.js:

const withCss = require('@zeit/next-css');
const withImages = require('next-images');
module.exports = withCss(withImages({}));

And this is the component:

import React from "react";
import Btn from "./Btn";
import Link from 'next/link';
import PNG from '../static/js.png';
import './Nav.css';

export default () => (
    <nav>
        <img src={PNG} className="logo" alt="Logo"/>
        <Link href="/" passHref><Btn>Index</Btn></Link>
        <Link href="/second" passHref><Btn>Second</Btn></Link>
    </nav>
);

Here is what I get:

[realalexhomer]

I had this issue it turned out the the limit was too low: https://github.com/arefaslani/next-images/blob/master/index.js#L16

I fixed it by just adding this rule to the config manually like:

config.module.rules.push({ // separate rule for svg so we can have no limit
  test: /\.svg$/,
  use: [
    {
      loader: "url-loader",
      options: {
        fallback: "file-loader",
        publicPath: "/_next/",
        outputPath: "static/images/",
        name: "[name]-[hash].[ext]"
      }
    }
  ]
});

[arefaslani]

@realalexhomer The limit is for creating base64 string from images under 8KBytes and insert image links for files more than 8Kbytes.

[arefaslani]

@kirill-konshin It was a problem in my webpack config. I've corrected the public path. A new version (0.9.2) is available that solved this issue.

[kirill-konshin]

Confirmed, it works.