How to resolve this Common problem with Nextjs 13 + TailwindCss?

Question

I want to resolve this error in console.

I use Tailwind and I don´t want to desactivate the Tailwind Preflight .

The code It´s this:

<div className="">
  <image 
    src="{img}" 
    alt="{name}" 
    width="{100}" 
    height="{100}" 
  />
</div>

Answer 1

I see that the image you are trying to use is an SVG you don't need the Image tag for that if it is a vector svg. I would suggest you create a react component and add your svg like this

import React from "react";

function Battery(props) {
  const size = props.size || 18;
  const fill = props.fill || "#7A59FA";
  return (
    <svg width={size} height={size} viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg" >
      <path
        d="M8.63672 1.79838H7.13379V0.89919C7.13379 0.40369 6.72752 0 6.23217 0H4.43433C3.93898 0 3.53271 0.40369 3.53271 0.89919V1.79838H2.02979C1.37382 1.79838 0.833252 2.33843 0.833252 2.99527V16.795C0.833252 17.462 1.37314 18 2.04126 18H8.62592C9.29269 18 9.83325 17.462 9.83325 16.8031V2.99527C9.83325 2.33911 9.29336 1.79838 8.63672 1.79838ZM7.68178 10.1152L5.28061 14.6166C5.06466 15.023 4.43433 14.867 4.43433 14.4005V11.2493H3.37952C3.30161 11.2493 3.22505 11.229 3.15735 11.1905C3.08964 11.1519 3.03311 11.0965 2.9933 11.0295C2.95349 10.9625 2.93176 10.8863 2.93026 10.8084C2.92876 10.7305 2.94753 10.6535 2.98472 10.5851L5.38589 6.08371C5.60185 5.67732 6.23217 5.83326 6.23217 6.29973V9.45094H7.28699C7.36459 9.45174 7.44069 9.4725 7.50795 9.51123C7.57521 9.54996 7.63137 9.60535 7.67103 9.67208C7.71069 9.73881 7.73251 9.81463 7.73439 9.89224C7.73628 9.96985 7.71816 10.0466 7.68178 10.1152Z"
        fill={fill}
      />
    </svg>
  );
}

export default Battery;

obviously you dont need the props you can leave the default values, but this is the way to manipulate it.