下一个图像不采用类属性 [英] Next Image not taking class properties

问题描述

我正在使用 Next.js 和 next/image 来显示图像，但是 CSS 在其中不起作用.该图像采用 SVG 格式，我已将其放在公共文件夹中.我正在使用 Tailwind CSS.

<图片className="mt-3";data-testid="close-icon";src="/CloseIcon.svg";alt=关闭导航栏"高度=24"宽度=24"/>

我不确定为什么它不起作用并且它没有反映在浏览器中.任何帮助将不胜感激！

解决方案

以这种方式设置 next/image 组件的样式当前不起作用(请参阅 https://github.com/vercel/next.js/issues/18585).

作为一种解决方法，您可以添加一个包装元素并对其应用样式.

<图像data-testid="close-icon";src="/CloseIcon.svg";alt=关闭导航栏"高度=24"宽度=24"/>

I am using Next.js and next/image to display images, but the CSS is not working inside it. The image is in SVG format and I have placed it in the public folder. I am using Tailwind CSS along with this.

<Image
  className="mt-3"
  data-testid="close-icon"
  src="/CloseIcon.svg"
  alt="Close Nav Bar"
  height="24"
  width="24"
/>

I am not sure why it is not working and it is not being reflected in the browser. Any help will be greatly appreciated!

解决方案

Styling the next/image component this way currently doesn't work (see https://github.com/vercel/next.js/issues/18585).

As a workaround, you can add a wrapper element and apply the styling to it instead.

<div className="mt-3">
    <Image
        data-testid="close-icon"
        src="/CloseIcon.svg"
        alt="Close Nav Bar"
        height="24"
        width="24"
    />
</div>

这篇关于下一个图像不采用类属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！