next-images Error: Module parse failed: Unexpected character '�'

Question

I'm trying to load an image with next-images: when i type in the image name it works fine:

//Working
<Image src={require(`../../images/exampleImage.jpg` )}/>

but i dont want that i want dynamic url like this:

//Not working
<img src={require(`../../images/${image}.jpg` )}/>

i get this error:

Error: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

my next.config.js file:

const withImages = require("next-images");
module.exports = withImages();

i also tried this config:

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000' 
      }
    )
    return config
  },
}

I tried many methods but none seems to work please help, thanks

I'm not sure it's possible to have a dynamic import path. Depending on the amount of images, I'd just import them all normally. If there's a large amount then maybe it's better to not import at all and and serve them as static files, this way you could construct dynamic paths. — Eyal, May 22 '21 at 22:49
@EyalC i can't do that because i'm implementing a image upload functionality in my website user can upload images and i store them on ./images so i need to have a dynamic import path — Aland Sleman, May 22 '21 at 22:57
Are you storing the uploaded images under the `public` folder of your app? Files added at runtime to the `public` folder won't be available; only assets that are there at build time will be served by Next.js. Try using a third-party service to store your images instead. — juliomalves, Jul 07 '21 at 00:20

Tolumide · Answer 1 · 2021-05-22T22:57:32.983

0

If you're open to using the file-loader library to handle images on the project. You could install the library and set the rules like this on webpack:

...
config.module.rules.push(
  {
    test: /\.(png|jpeg|jpg|gif|svg)$/,
    use: {
      loader: "file-loader"
    },
  }
),

You can read more about file-loader from its documentation on webpack

edited May 22 '21 at 22:57

answered May 22 '21 at 22:50

Tolumide

944
9
11

i get this error: Error: Cannot find module './c7844f96-7cb7-43cf-ac34-d407fd32ce3eb.jpg' that long filename is ${image} – Aland Sleman May 22 '21 at 22:55
great, you can remove the options for now. I would update my answer to reflect this. – Tolumide May 22 '21 at 22:57
okay now i don't get the error but the images are not loading – Aland Sleman May 22 '21 at 23:07
the images have this path: http://localhost:3000/44044f6c6e6b4f631ff968d1a2ed9264.jpg which is invalid path – Aland Sleman May 22 '21 at 23:09
I just read your question again now, and it occurred to me that you're trying to load an image dynamically. Is the complete image coming from the backend? Do you already have the image as an asset on the Client side? or it's only the name of the image that is coming from backend? – Tolumide May 22 '21 at 23:10
i'm storing images on ./images folder – Aland Sleman May 22 '21 at 23:13
If you don't mind, why do you want to dynamically load the "name" of the image? Perhaps, I might be able to suggest another approach? – Tolumide May 22 '21 at 23:18
i'm implementing a image upload functionality in my website user can upload images and i store them on ./images so i need to have a dynamic import path and name of the image... – Aland Sleman May 22 '21 at 23:20
2

I would suggest you have a backend service and a cloud bucket like s3 to handle something like this. – Tolumide May 23 '21 at 00:05

score 0 · Answer 2 · answered Jul 11 '21 at 19:36

0

Webpack is most likely trying to find & include your images at the build time. This cannot work with reading the name from a variable. You have 2 options:

manage images differently
if you have a finite (or rather short) list of images, just import all & use some kind of switch to control which image is displayed.

answered Jul 11 '21 at 19:36

Marcin Wosinek

793
3
8

'manage images differently' what do you mean by that? – Aland Sleman Jul 11 '21 at 21:58
sorry for confusing wording, I meant what was already mentioned in the comments: > Try using a third-party service to store your images instead. – Marcin Wosinek Jul 12 '21 at 20:30

score 0 · Answer 3 · edited Apr 17 '22 at 18:35

0

I had this issue too.

delete all your code in the next.config.js
add the below codes instead:

/** @type {import('next').NextConfig} */
const nextConfig = { 
    reactStrictMode: true,
    images: {
        dangerouslyAllowSVG: true,
        contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    },
};
    
module.exports = nextConfig;

It resolved my problem.

edited Apr 17 '22 at 18:35

juliomalves

42,130
20
150
146

answered Apr 12 '22 at 07:49

Saeid Shoja

159
2
8

next-images Error: Module parse failed: Unexpected character '�'

Error: Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)

3 Answers3