What to do when get nextjs server error when loading image from scss/sass variable in nextjs Image component?

Server Error
Error: Failed to parse src ""https://yourdomain.com/develop-app/assets/images/body-bg5.png"" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

I was facing this error recently on my nextjs project, I wanted to load the background Image path from SCSS variable into the NextJs Image components.

Before this error occurred, I was hunting on google for the answer and found it that how to import scss variables into react component, and I found we can import scss variable by declaring in scss file itself using :export directive of scss

//Example of exporting variable from scss file

$BODY_BG: "https://yourdomain.com/develop-app/assets/images/ka-body-bg.png";
$BODY_BG_OPT1: "https://yourdomain.com/develop-app/assets/images/ka-body-bg1.png";

:export {
    BODY_BG: $BODY_BG;
    BODY_BG_OPT1: $BODY_BG_OPT1;
}

and then can import easily into react component by installing node-sass npm package and then import the file of scss variable into react component like :

import backgroundVar from "../styles/background.module.scss";

//(note: I have used backgroundVar as my variable import name for all the scss variables exported from background.module.scss file)

and use it like this in your react state hook or directly in react component

const homeBodyBg = trimOutThis(backgroundVar.BODY_BG_OPT5 && backgroundVar.BODY_BG_OPT5, /"/g, '');

const [bgImage, setBgImage] = useState(homeBodyBg || '');

To fix the error of nextjs error of:

Error: Failed to parse src ""https://yourdomain.com/develop-app/assets/images/body-bg5.png"" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)

I wrote small function to trim off the double quotes “” which we get from scss variable declaration for path, here is that function below and you may notice in above code, I am already trimming the double quotes with empty string and then it works like charm!

//Function to replace any string pass to an empty string or to be replaceable by something else

export const trimOutThis = (str, regx, replaceValue = "") => {
  if (!str.length || !regx) return '';


  return str.replace(regx, replaceValue);
}

//Function invoking example


const homeBodyBg = trimOutThis(backgroundVar.BODY_BG_OPT5 && backgroundVar.BODY_BG_OPT5, /"/g, '');

output without double quotes ” for NextJS image src

Hope this will help you in your search and solving issues.

---

Have nice day & Happy Learnings.

Thanks for visiting.