Hello,
If you are facing error :
Unhandled Runtime Error
TypeError: Failed to construct 'URL': Invalid URL
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!
Break! I didn’t plan it. One day I just didn’t feel like opening Instagram—and then…
AI tools Let’s be real—AI sounds like either a robot apocalypse or something only tech…
Summer vacation is a great time for kids to explore, have fun, and learn new…
Goal: Understand transformers, large language models, and the architecture behind ChatGPT. Tutorial Suggestions: ✅ “Transformers…
Goal: Build apps or tools with ChatGPT or GPT-4 API. Tutorial Suggestions: ✅ OpenAI API…
Goal: Learn how to prompt better, write content, brainstorm, code, etc. Tutorial Suggestions: ✅ OpenAI's…