Question

我在将具有一些预设样式的img标记转换为nextjs13中的Image组件时遇到了一些问题。问题是我在宽度上有一些样式，所以我不能使用fill={true}，因为它需要宽度=100%。因此，我也不知道该设置什么宽度和高度。这是我的标签：

<img
    src={ImgSrc}
    alt={`An image of the ${title} project.`}
    style={{
        width: hovered ? "90%" : "85%",
        rotate: hovered ? "2deg" : "0deg",
    }}
/>

所有图片均为png/jpg 642x408。当我将高度和宽度设置为这些数字时，宽度样式不会应用。

我正在使用TypeScript btw

Answer 1

您需要将next/images包导入到您的代码中（与Image组件位于同一文件中）：

import Image from  next/image

要做到这一点，您必须使用以下命令安装关联的npm包：

npm install next/image

现在，您的代码如下所示：

<Image
    src={ImgSrc}
    alt={`An image of the ${title} project.`}
    width={hovered ? "90%" : "85%"}
    height={hovered ? "auto" : "auto"} 
    style={{ transform: hovered ? "rotate(2deg)" : "rotate(0deg)" }}
/>

Note: The Image Component requires the following properties: src, width, height, and alt. Reference: NextJS Documentation

友情链接