Learning

Solution: TypeError: Failed to construct ‘URL’: Invalid URL

Hello,

If you are facing error :


Unhandled Runtime Error
TypeError: Failed to construct 'URL': Invalid URL
Failed to construct ‘URL’ : Invalid URL in your nextjs app

And you already have following loader ‘imgix’ settings in your next.config.js file

images: {
    // loader and path setting for android build to load nextjsimage and also on web on certain scenarios!
    loader: 'imgix',
    path: '/', // Remove the path prefix for production images
    domains: [
      'xxx.com',
      '*.xxx.com',
      'aaa.xxx.com',
      'via.placeholder.com',
    ],
}

To fix this the solution provided here worked out well!

Code snippet solution: source page stackoverflow

const loaderProp =({ src }) => {
    return src;
}

<Image
      src={currentImage.imageurl}
      alt={currentImage.imageurl} 
      layout="fill"
      className={styles.imageSize} 
      loader={loaderProp}
/>

we just need to add loader prop to the Image tag of next.js component and passdown the callback function which resolves the error above, voila!

Hope this also help you if you are facing this solution in your next.js application.

happy learning!

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…

2 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…

2 days ago

Summer Learning Ideas

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

4 days ago

Understanding How ChatGPT Works (ML/AI learning path)

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

4 days ago

Using ChatGPT API (for developers)

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

4 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…

4 days ago