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
(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!!!!!

Top comments (2)

rajibola profile image
Ridwan Ajibola

Have you been able to solve this problem?

magimart profile image
Magima Felix O

yes i did solve it!
my solution here --------------
// config image
images: {
domains: [''],
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.

Let's team up together 🀝

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.