标签: nextjs-image

我正在使用 NextJS 图像组件。我希望图像填充 100% 宽度并采用保持纵横比所需的高度。我已经尝试了此代码的许多不同变体，但除非我在父 div 上定义固定高度，否则它将无法工作。

export default function PhotoCard({ img }: Props) {
      return (
        <div className="relative w-full h-32 my-2">
          <Image alt={img.title} src={img.url} layout="fill" objectFit="cover" />
        </div>
      );
    }

这是当前的行为

我有各种图像网址并随着时间的推移而变化（图像是通过网址地址获取的，而不是本地或来自私人存储）。为了渲染<Image />tag ，域应该传递给 nextjs 配置。随着时间的推移，不可能传递数百个 url。

如何允许所有域？

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      "img.etimg.com",
      "assets.vogue.com",
      "m.media-amazon.com",
      "upload.wikimedia.org",
    ],
  },
};

module.exports = nextConfig;

我试过这个但没用， "*.com"

import Image from 'next/image'

...

<Image src="/emotion.svg" alt="emtion" width={50} height={50} />

我想更改 中的 SVG 颜色next/image。

但在 CSS 中，

img {
  fill="#ffffff"
}

不管用。

我该如何解决这个问题？

所以我试图用 next/image 的组件显示图像。但是，图像并未显示。我相信这是因为 next/image 给了我一个 400 bad request 错误。

当我单击该 URL 时，它显示“请求的资源不是有效图像”，这很奇怪，因为从后端检索图像 url 后，我能够下载图像以查看它是有效图像，所以此错误是在将图像链接传递到组件的 props 中之后发生的。基本上，我的请求是正确的，但是 next/image 与图像 url 的交互被搞乱了。奇怪的是，几天前我也没有出现此错误，在没有更改任何内容后，我看到了此错误。

我已经像这样配置了 next.js 配置文件，并且对后端的请求确实检索了可下载的图像（next/image 只是没有正确显示）。

这是我的 next.js 配置文件：

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

const nextConfig = {
  images: {
    domains: [
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
    ],
  },
  
};


module.exports = withPlugins([[withImages]], nextConfig);

我正在尝试在 Next.js 项目中使用 Tailwind CSS，但我无法将 Tailwind 类与 Next.js Image 组件一起使用。

这是我的代码：

<Image
    src={img.img}
    alt="Picture of the author"
    width="200"
    height="200"
    className="bg-mint text-mint fill-current"
></Image>

我想使用 Tailwind 类而不是Next.js 图像的heightandwidth属性。但我不能，因为它给我一个错误。此外，unsizedproperty 会引发另一个错误，指出它已被弃用。有什么解决办法吗？

如果我不使用heightandwidth属性，这里是错误。

当我使用该layout='fill'属性时，它只显示一张图片。如果我使用该unsized属性，则会显示以下错误。

我尝试在 Next.js 中导入图像，但收到此错误。我不知道出了什么问题，这里有人可以帮我解决这个问题吗？该图像位于公共文件夹中，这是我运行服务器时遇到的错误。

错误：无法解析 src“../public/logo.png” next/image，如果使用相对图像，则必须以前导斜杠“/”开头或者是绝对 URL（http:// 或 https://）

我正在倾斜 Next.js，我发现它用两个跨度next/image包装img并将内联样式添加到img覆盖我的类样式的标签中

如何删除内联样式和包装 HTML 标签（如spans和 ）divs？

我的代码看起来像

import Image from 'next/image';
<Image className={'imgBack'} src={myImg} width="160" height="160" alt="" />

结果

<span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
    <span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
    <img …

我使用 getStaticProps 从 Firebase 获取一些图像，然后使用下一个图像组件显示它们。但是，它们需要一段时间才能显示，如何在未加载时显示占位符？

我在我的项目中同时使用 Next JS 和 Material UI。对于图像优化，我想使用 Next JS Image 组件。

目前，我的卡片媒体如下所示。我从 API 调用中获取图像 URL row.image.url并将其分配给CardMedia组件的image prop

 <CardMedia
 className={classes.cardMedia}
 image={row.image.url}/>

import Image from 'next/image'