👀 Views: 2 💬 Answers: 1 📅 Created: 2025-06-11

next.js svg image javascript

I'm stuck on something that should probably be simple. I'm stuck on something that should probably be simple. I'm working with an scenario with the Next.js Image component while trying to display SVG images using a custom loader. The SVGs are not rendering as expected, and I see an behavior in the console: `behavior: Image with src "https://example.com/image.svg" could not be found.` I've tried using different loading strategies but none seem to work. Here's the custom loader I implemented: ```javascript const customLoader = ({ src }) => { return `https://example.com/${src}`; }; ``` And I'm using the Image component like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return <Image loader={customLoader} src='image.svg' alt='My SVG' width={500} height={500} />; }; ``` I've ensured that the URL resolves correctly by checking it in the browser. Other image formats like JPEG or PNG work fine with this custom loader. I've also looked into the configuration of Next.js and made sure that my `next.config.js` includes the following: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` However, I still get the same behavior when trying to load the SVG. Is there something I'm missing in the configuration or is there a limitation with SVGs in the Next.js Image component? Any insights would be appreciated. For context: I'm using Javascript on macOS.