img import bug on the React/Next js site

Question

community. Recently I faced one very annoying bug in my React/Next JS site.

I can't display any image if I'm using src='/static/images/service'/>. Importing and assigning a route like this: import Image1 from "../../static/images/service.png"; to js variable doesn't help either.

According to the Next Js documentation all assets should strictly be stored in “/static” folder which is in the root folder by itself.

Strangely that I can access images with no problem using background-image in CSS

background-image: url("../../static/images/service.png"); but not in the <img/> way. Which is the only option for me because I'm using .map method to render images and give them the path from an array.

Plus I have all possible loaders for different types of files installed.

What might be the issue for this behavior?

Link to my repo: https://github.com/kkdima/barva

To test it on your machine:

git clone https://github.com/kkdima/barva.git

npm i

npm run dev

Answer 1

instead of giving path in src of img tag. import it in your file and then use it. it will hopefully fix the problem. code below:

import Image1 from "../../static/images/service.png";

and then provide the src like this:

<img src={Image1} />

Answer 2

For that you need to add Image loader in next.config.js . You can use next-images package for that. Below is the link of package :

https://github.com/twopluszero/next-images