NextJS Image 组件没有响应我的内联 CSS

Posted 2023-03-06

【中文标题】NextJS Image 组件没有响应我的内联 CSS

【英文标题】：NextJS Image component not responding to my inline css inside it

【发布时间】：2021-05-30 22:43:34

【问题描述】：

为什么 NextJS 中的 Image 组件内部的样式不允许我操作我的图像。 我错过了什么吗？

<Image className=styles.bg
        style= transform: `translateY($offset * 0.5px)` 
        src="/../public/bg.jpg"
        // width=2049
        // height=2049
        // objectFit="cover"
        layout="fill"
        quality=100
      />

【问题讨论】：

translateY($offset * 0.5px) src="/../public/bg.jpg" // width=2049 // height=2049 // objectFit="cover" layout="fill" quality=100 />

不能在next/image组件中直接使用style。你必须使用 className 属性。

【参考方案1】：

组件上的其他属性将被传递给底层的 img 元素，但以下情况除外：

风格。请改用 className。

【讨论】：

OP 询问样式，问题不在于加载图像或如何解决它。

我可以看看你的图片组件吗？

OP 正在使用Next.js built-in image component。