标签: nextjs-image

Next.jsImage在 v10 中引入了一个新组件，它应该是<img>标签的替代品。

尝试查看导入next/imageStorybook 的组件时出现错误：

TypeError: imageData is undefined

我一直在尝试覆盖图像对象preview.js（我使用的一种技术next/router，如此处所述），但我遇到了相同的错误：

// .storybook/preview.js

import Image from 'next/image';

Image = ({ src }) => <img src={src} />;

知道如何覆盖next/imageStorybook 中包的行为吗？

我正在使用最新版本的 NextJS 10.0.9。我有一个想要显示的图像，但是收到错误：

Error: Image with src "https://picsum.photos/480/270" must use "width" and "height" properties or "layout='fill'" property.

正如您在这里看到的，我确实设置了所有这些属性：

<div className="card-img">
  <Image
    alt={media?.title}
    title={media?.title}
    src={media?.previewImage || 'https://picsum.photos/480/270'}
    width={480}
    height={270}
    layout="fill"
  />
</div>

由于某种原因，默认的外部图像似乎不想与图像组件很好地配合。有谁知道解决方法或可能出现这种情况的原因？

还有一点旁注：我在属性上遇到了 Typescript 错误layout，提示“类型‘“fill”’不可分配给类型‘“fixed”|“intrinsic”|“responsive”| undefined’。”。我不确定这是否相关？

我已设置图像域，next.config.js但图像未显示在本地主机上。但是，当代码推送到生产环境时，图像会加载到 vercel 上。

在本地主机上我得到下面的图片。图像无法加载。

生产时，可以看到图像

我应该怎么做才能看到开发图像？

module.exports = {
    images: {
        domains: [ 'd31wtm2rx76rut.cloudfront.net'],
    },
}

module.exports = {
    images: {
        domains: [ 'd31wtm2rx76rut.cloudfront.net'],
    },
}

I\xe2\x80\x99m 打算使用 next/image 来优化我网站上的图像。然而，在构建项目后，我的所有图像都获得了一个似乎重置样式的样式属性。 \nI\xe2\x80\x99m 是 React 和 Next.js 的新手，我似乎找不到任何具有该属性的人同样的问题。

这是我的下一个/图片：

<Image src="/images/KontacktPhoto.jpg"\n    loading="lazy"\n    id="w-node-c2896189-6d63-ce1c-bac3-f0aee0dcc9c2-e0dcc9be"\n    alt\n    className="image-4"\n    layout="fill"\n/>\n

这是在浏览器中呈现的图像：

<img id=\xe2\x80\x9dmyPic\xe2\x80\x9d src="/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=3840&amp;q=75" decoding="async" class="image-4" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" sizes="100vw" srcset="/_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=640&amp;q=75 640w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=750&amp;q=75 750w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=828&amp;q=75 828w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2Fimages%2FKontacktPhoto.jpg&amp;w=3840&amp;q=75 3840w">\n

可以看到 next/image 给图片添加了这个样式属性：

style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"\n

我知道这可能是 next/image 的一个功能，可以使内置的“布局”属性正常工作。但是，如果我在浏览器中手动删除样式属性，图像似乎可以正确显示。

有没有办法让 next/image 知道我不想要这个样式属性？

我对 Next.js 中的图像组件有一个小问题。我使用的是下一个11.0.1版本，在开发和本地环境中没有发现任何问题。图像正在优化，一切正常。然而，我和团队发现当网站部署到生产环境时，图像没有得到优化。我们正在使用亚马逊服务来做到这一点。

这是我的意思的证明：

当地环境：

On wide-screen (1024px width)
Rendered size:  50 x 50 px
File size:  1.3 kB

生产环境：

On wide-screen (1024px width)
Rendered size:  512 x 512 px
File size:  41.5 kB

当然，这并不是一个很大的区别，但我仍然想知道如何在生产环境中解决这个问题。我还添加了对项目本身的强烈依赖，因为我知道它将提高在页面上加载图像的性能。问题可能是亚马逊设置不正确吗？

Next.config.js

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['avatars.slack-edge.com'],
  },
};

我正在浏览一些教程，经过大约一个小时的搜索，我似乎找不到解决方案。我对特定组件（导航栏）所做的任何更改都不会反映在开发服务器中。

我只是想更改和使用Image标签，但在 VScode 中保存后，没有反映任何更改，即使在 Google 开发工具的“元素”选项卡中也是如此。

这些更改仅在我重新启动开发服务器后才会反映出来。

import Image from 'next/image';
import Link from 'next/link';

const Navbar = () => {
  return (
    <nav>
      <div className="logo">
        <Image src="/logo.png" alt="nothing" width={122} height={78}/>
      </div>
    </nav>
);
}
 
export default Navbar;

这是我的版本和依赖项：

"packages": {
    "": {
      "name": "ninjalist",
      "version": "0.1.0",
      "dependencies": {
        "@next/font": "13.1.6",
        "next": "13.1.6",
        "react": "18.2.0",
        "react-dom": "18.2.0"
      }
    }

有人有解决办法吗？

我的开发服务器运行在端口3000上，但之前我在其他组件中遇到了同样的问题，所以我将其更改为端口8000，按照另一个线程的解决方案。

"scripts": {
    "dev": "next dev -p 8000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }, …

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

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

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

我想在下一个js中使用动态链接Image。接下来Js建议

<Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />

但我想用像

const imageDynamic = [Image][1]

<Image
        src="https://en.wikipedia.org/wiki/Image#/media/File:Image_created_with_a_mobile_phone.png" or {imageDynamic}
        alt="Picture of the author"
        width={500}
        height={500}
      />

图像将来自 api，因此图像 src 每次都会更改。我无法在下一个js图像中使用链接，是否可以在下一个js图像中使用链接？

我只是想知道如何使用<Image>Next.js 中的组件让图像拥有自己的高度和宽度，而不是自己定义高度和宽度？

我正在使用 next/image，并且当图像的路径无效时，我希望图像根本不渲染，例如。该图像不存在。现在它显示小图标和替代名称。在这种情况下我不想显示任何东西。那可能吗？由于它是前端，我无法用来fs检查，所以我不知道该怎么做

      <Image
         src={`/scroll-${router.locale}.svg`}
         alt="scroll"
         width="240px"
         height="240px"
         className="opacity-50"
       />