How to convert img to Image component in next.js – Blancer.com Tutorials and projects

I have implemented all the logic in this component. But it is according to the tag. Now, I want same logic to implement in the Image component. But doing so, it is giving me error.

TypeError: Failed to construct 'Image': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Her is the code I changed “`import React, { useState, useRef, useEffect } from “react”;

const ImageUploadCard = () => {
const componentRef = useRef(null);
const [componentWidth, setComponentWidth] = useState(0);
const [componentHeight, setComponentHeight] = useState(0);

useEffect(() => {
// Function to update component width
function updateComponentWidth() {
if (componentRef.current) {
const width = componentRef.current.getBoundingClientRect().width;
const height = componentRef.current.getBoundingClientRect().height;

    console.log("Component width:", width);
    console.log("Component width:", height);
    setComponentWidth(width);
    setComponentHeight(height);
  }
}

// Update component width initially and add event listener for window resize
updateComponentWidth();
window.addEventListener("resize", updateComponentWidth);

// Clean up event listener on component unmount
return () => {
  window.removeEventListener("resize", updateComponentWidth);
};

}, []);

const inputRef = useRef(null);
const [previewImage, setPreviewImage] = useState(null);

const handleImageChange = (event) => {
const file = event.target.files[0];
if (file && file.size > 5242880) {
// File size exceeds the maximum limit
// You can display an error message or handle it as needed
console.log(“File size exceeds the maximum limit (5MB)”);

  return;
}
if (file) {
  const reader = new FileReader();
  reader.onloadend = () => {
    setPreviewImage(reader.result);
  };
  reader.readAsDataURL(file);
} else {
  setPreviewImage(null);
}

};

return (

<div
style={{ width: componentWidth }}
className=”dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center”
onClick={() => inputRef.current.click()} // Click event triggers file input
>

Image formats: JPEG, PNG, JPG . Max size: 5 MB

  {previewImage && (
    <div
      className="dark:bg-jacarta-700 dark:border-jacarta-600 border-jacarta-100 group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed bg-white py-20 px-5 text-center"
      style={{ width: componentWidth, height: 400 }} // Set width dynamically
    >
      <Image
        src={previewImage}
        alt="Preview"
        style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "cover" }}
      />
    </div>
  )}
</div>

);
};

export default ImageUploadCard;

<img> tag which is working

import React, { useState, useRef, useEffect } from “react”;