Update next.config.js
: You need to add the domain of your image URL to the images
configuration in your next.config.js
file. This step is crucial for Next.js to trust and optimize images from external sources.
Here’s an example of how you can configure it:
module.exports = {
images: {
domains: ['example.com'], // Replace 'example.com' with the domain of your image source
},
};
BashUsing the Image Component: Once you have configured the allowed domains, you can use the Image component to load an image from the URL. Here’s how you can do it in your component or page:
import Image from 'next/image';
function MyComponent() {
return (
<div>
<Image
src="https://example.com/path-to-your-image.jpg" // Replace with your actual image URL
alt="Description of the image"
width={500} // Set the width as needed
height={300} // Set the height as needed
layout="responsive"
/>
</div>
);
}
export default MyComponent;
Bash