Approach 1 Using Inline Styles

• We have applied the styles directly as inline styles to the <div> element containing the Image component.
• The border, borderRadius, boxShadow, and margin properties have been properly applied using inline CSS.
• You can change the styles in the code, the changes will be reflected in the image too.

Syntax:

import Image from 'next/image';
const HomePage = () => (
  <div>
    {/* Header */}
    {/* Section Title */}
    {/* Container with inline styles */}
      {/* Image component */}
  </div>
);
export default HomePage;

Example: Now in your index.js file add the below content:

Now, paste the below config code in the file “next.config.js“. We are adding the configuration for external images.

// next.config.js
module.exports = {
    images: {
      domains: ['media.w3wiki.org'], // Add the domain of your image source
    },
  };

Step to run the application: Now run the application with the below command:

npm run dev

Output:

In this article, we will solve the problem of “Next Image not taking class properties” occurring due to the way the ‘next/image‘ component handles its underlying HTML layout and overall structure. The ‘next/image‘ component is the component that generates the additional wrapper elements and inline styles to perform the image optimization.