css 如何在Nextjs13中将img转换为Image组件？

xpcnnkqh 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(140)

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

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

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

css

来源：https://stackoverflow.com/questions/76544399/how-to-convert-img-to-image-component-in-nextjs13

1条答案

按热度按时间

y3bcpkx11#

您需要将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)" }}
/>

注意：图像组件需要以下属性：src、width、height和alt。参考：NextJS Documentation

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何在Nextjs13中将img转换为Image组件？

1条答案

相关问题

热门标签

最新问答