How to resolve ‘Next Image not taking class properties’ issue?

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.

Steps to Create the Next App:

Step 1: Set up React Project using the Command:

npx create-next-app next-image-example

Step 2: Navigate to the Project folder using:

cd next-image-example

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18"
}

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:

Javascript

//index.js
import Image from 'next/image';

const HomePage = () => {
    return (
        <div style=
            {
                {
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    minHeight: '100vh'
                }
            }>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3>
                Next Image not taking class
                properties [Approach 1: Using Inline Styles]
            </h3>

            <div style=
                {
                    {
                        border: '2px solid red',
                        borderRadius: '4px',
                        boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
                        margin: '20px'
                    }
                }>
                {/* next/image with specified width, height, and styles */}
                <Image
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
                    alt="GFG Image"
                    width={300}
                    height={300}
                />
            </div>
        </div>
    );
};

export default HomePage;

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.geeksforgeeks.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:

Approach 2: Using Custom Image Wrapper:

• We have encapsulated the ‘Image’ component into the custom component (‘CustomImage’).
• This custom component applies the desired class properties and the proper styling using the CSS modules.
• So the styling is separated and properly applied to the ‘Image’ component to ensure that the class properties are properly known and the desired styles are displayed properly.

Example: Now add the below code in the respective files shown in Project Strucutre.

Javascript

//index.js
import CustomImage from './CustomImage';
import styles from './styles.module.css';

const HomePage = () => {
    return (
        <div className={styles.container}>
            <h1 className={styles.title}>
                GeeksforGeeks
            </h1>
            <h3 className={styles.subtitle}>
                Next Image not taking class properties
                [Approach 2: Custom Image Wrapper]
            </h3>

            <div className={styles.imagesRow}>
                <CustomImage
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
                    alt="GFG Image 1"
                    width={300}
                    height={300}
                    borderColor="#FE012B"
                />

                <CustomImage
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                    alt="GFG Image 2"
                    width={300}
                    height={300}
                    borderColor="#0A04FB"
                />
            </div>
        </div>
    );
};

export default HomePage;

Javascript

//CustomImage.js
import React from 'react';
import Image from 'next/image';
import styles from './styles.module.css';

const CustomImage = (
    {
        src, alt,
        width, height,
        borderColor
    }
) => {
    const imageStyles = {
        border: `4px solid ${borderColor}`,
    };

    return (
        <div className={styles.imageContainer}
            style={imageStyles}>
            <Image src={src}
                alt={alt} width={width}
                height={height}
                className={styles.imageStyle} />
        </div>
    );
};

export default CustomImage;

CSS

/* styles.module.css */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f4f4f4;
    text-align: center;
}

.title {
    color: #079e20;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.subtitle {
    color: rgb(0, 0, 0);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.imagesRow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.imageContainer {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, transform 0.3s;
    cursor: pointer;
    display: inline-block;
    margin: 20px;
}

.imageStyle {
    display: block;
    border-radius: 6px;
}

.imageContainer:hover {
    border-color: #fff;
    transform: scale(1.05);
}

Step 3: 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.geeksforgeeks.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: