Categories: Learning

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.

admin

Recent Posts

What I Learned After Taking Break from Instagram for 30 Days

Break! I didn’t plan it. One day I just didn’t feel like opening Instagram—and then…

3 days ago

5 AI Tools That Actually Save You Time (And Aren’t Scary)

AI tools Let’s be real—AI sounds like either a robot apocalypse or something only tech…

3 days ago

Summer Learning Ideas

Summer vacation is a great time for kids to explore, have fun, and learn new…

5 days ago

Understanding How ChatGPT Works (ML/AI learning path)

Goal: Understand transformers, large language models, and the architecture behind ChatGPT. Tutorial Suggestions: ✅ “Transformers…

5 days ago

Using ChatGPT API (for developers)

Goal: Build apps or tools with ChatGPT or GPT-4 API. Tutorial Suggestions: ✅ OpenAI API…

5 days ago

Using ChatGPT Effectively (for general users or productivity)

Goal: Learn how to prompt better, write content, brainstorm, code, etc. Tutorial Suggestions: ✅ OpenAI's…

5 days ago