DEV Community

Magima Felix O
Magima Felix O

Posted on

problem with image/video loading in Next js

Hello Next Js Developers
I have had this problem for days now.
How does one go about it.
Iam am trying to add a background Image/Video on A Next js Page(component). But does not really work!

/_______________here is the error____________________

Failed to compile
./pages/clip/elephant.jpg 1:0
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)

/__________i have tried to go through webpack docs but all in vain
Thank and happy day of coding!!!!!

Latest comments (2)

Collapse
 
rajibola profile image
Ridwan Ajibola

Have you been able to solve this problem?

Collapse
 
magimart profile image
Magima Felix O

yes i did solve it!
my solution here --------------
// config image
images: {
domains: ['res.cloudinary.com'],
loader: 'imgix', // this is a hack until the bug is fixed,
path: "noop/"
}

in fact with the above solution you don't even need to import nextjs's Image component from "next/image" to wrap around your image tag or component.

You just need to a need to add this piece of object to your Next.config.js file .
Note that the key domains, you will have to place sources if you have any external images that your app is savaging from, just to let next js know of the image sources.

I am so so sorry for late response, i did not his this notification. incase of any problem just write me i will help.