标签: nextjs-image

我正在使用next/image，效果很好，除了加载的实际图像非常刺耳，并且没有动画或淡入。有没有办法做到这一点？我已经尝试了很多东西，但没有一个起作用。

这是我的代码：

<Image
  src={source}
  alt=""
  layout="responsive"
  width={750}
  height={height}
  className="bg-gray-400"
  loading="eager"
/>

根据文档，我可以使用该className道具，但这些道具会立即加载，并且在加载后我无法找到任何应​​用类的方法。

我也试过了onLoad，根据这张票，它不受支持：https : //github.com/vercel/next.js/issues/20368

我正在使用 NextJS Image 组件，如下所示：

<Image src="https://firebasestorage.googleapis.com/v0/b/africatech-7cf1b.appspot.com/o/images%2F1606851317444_impact-logo-sq-Owen-Hancock.png?alt=media&token=35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb" layout="fill" />

在本地它可以工作，在 DOM 中它看起来像这样：

<img alt="Company logo" src="/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=3840&amp;q=75" decoding="async" sizes="(max-width: 640px) 640px, (max-width: 750px) 750px, (max-width: 828px) 828px, (max-width: 1080px) 1080px, (max-width: 1200px) 1200px, (max-width: 1920px) 1920px, (max-width: 2048px) 2048px, 3840px" srcset="/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=640&amp;q=75 640w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=750&amp;q=75 750w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=828&amp;q=75 828w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=1080&amp;q=75 1080w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=1200&amp;q=75 1200w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=1920&amp;q=75 1920w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=2048&amp;q=75 2048w, /_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fafricatech-7cf1b.appspot.com%2Fo%2Fimages%252F1606851317444_impact-logo-sq-Owen-Hancock.png%3Falt%3Dmedia%26token%3D35afb1d8-4ab8-4f58-81b4-dd25e1f5f3eb&amp;w=3840&amp;q=75 3840w" style="visibility: visible; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; …

从版本 10 开始，Next.js 带有内置Image组件，该组件提供图像优化和响应式调整图像大小的功能。我非常喜欢它，并且一直在我的网站上使用它来处理固定大小的图像。根据官方文档， width 和 height 是必需的道具，除非是 for layout=fill.

现在，Image即使我不知道宽度和高度，我也想使用组件。我有来自 CMS 的博客资源，其中图像的确切大小未知。在这种情况下，有什么办法可以使用Image组件吗？

任何帮助，将不胜感激。

我正在尝试将 Next.js 图像组件与所有具有唯一尺寸的图像一起使用。他们的示例指出图像将拉伸到父 div 的宽度和高度。我尝试过包装它们，但不知道如何适应动态图像尺寸。我想要一个设定的宽度和高度来调整每个相应的比例。TIA。

这是我的代码（图像来自数组）——因为我没有设置高度，所以页面上不会呈现任何内容。如果我使用 Tailwind，h-auto它仍然不显示：

<div className="w-screen h-screen">
  {allImages.allImages.map((image, i) => {
    return (
      <div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
        <Image priority src={`/${image}`} layout="fill" objectFit="cover" />
      </div>
  )})}
</div>

我向 UserCard 提供 src 属性，但随后我也收到以下错误。

错误

Unhandled Runtime Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":50,"height":50}

不同文件中的代码如下

在 UserCard.js 中

Unhandled Runtime Error
Error: Image is missing required "src" property. Make sure you pass "src" in props to the `next/image` component. Received: {"width":50,"height":50}

在阿凡达/Big.js

import Avatar from './Avatar';
import Link from 'next/link';

export default function UserCard({ user, border, onClick }) {
    function handleCloseAll() {
        if (onClick) onClick(); …

我有一个博客，使用不同比例和长宽比的图像。有的又短又宽，有的又高又窄。您可以在此处查看示例。

我希望我的图像：

• 最多与帖子一样宽（不大于其容器的 100% 宽度），以便当图像又宽又短时，它会填充帖子宽度的 100%。
• 高度最多为 350 像素，这样当图像又高又窄时，它的大小就会受到其高度的限制 - 它将是 350 像素高，并位于帖子中间的中心。

就像这样：

为了使用常规img标签实现这一点，我使用以下 css：

  img {
    display: block;
    max-width: 100%;
    max-height: 350px; // to restrict the height of tall narrow images
    margin: auto; // to center the tall narrow images when their width is less than 100%
  }

现在我想使用 自动缩小和优化我的图像next-image，但我似乎无法找到正确的样式和参数组合来实现相同的效果。

当我设置 时layout="responsive"，图像始终填充容器宽度的 100%，忽略max-height参数。因此，如果图像非常高且非常窄，它仍然会完全拉伸到帖子，使其高得离谱。

就像这样：

当我设置时，layout="fill" objectFit="contain"我可以将图像包装在容器中并将容器的 css 设置为width:100%; height: 350px. 现在它会将高窄图像缩小到最大350px高度，但如果图像非常宽且非常短，容器的高度仍然为 350px（尽管现在应该短得多，因为图像很短） …

我正在尝试在下面的代码中使用 anext/image而不是常规标签。img使用常规<img>标签，以下内容完全实现了我正在寻找的内容：

<div>\n  <picture>\n    <source\n      srcSet="https://via.placeholder.com/100/333333/ffffff.png"\n      media="(prefers-color-scheme: dark)"\n    />\n    <img\n      src=\'https://via.placeholder.com/100/dddddd/000000.png\'\n      width=\'100px\'\n      height=\'100px\'\n      alt=\'Placeholder image\'\n    />\n  </picture>\n  <p>Change your OS or browser\'s preferred color scheme to see a different image.</p>\n</div>

\n

事实上，当我将操作系统（或浏览器）设置为深色主题时，我会得到深色图像，反之亦然。

但是，如果我尝试使用 a 进行同样的操作next/image，我每次都会得到以光为主题的图像\xe2\x80\xa6 我无法将其放入代码片段中，因为next/image需要 Next.js 服务器，但这里是代码我正在使用的，在我的测试中，它由 Next.js 开发服务器支持，并在 next.config.js 中配置了适当的图像相关设置：

// pages/test.js\nimport Image from \'next/image\'\n\nexport default function MyWebPage () {\n  return (\n    <div>\n      <picture>\n        <source\n          srcSet="https://via.placeholder.com/100/333333/ffffff.png"\n          media="(prefers-color-scheme: …

我创建了中间件并/((?!api|_next/static|_next/image|favicon.ico|auth/login).*)在配置中间件中添加了匹配器。当我尝试运行时npm run dev。结果如下：

ImageError: Unable to optimize image and unable to fallback to upstream image
    at imageOptimizer (C:\work\internal-dashboard\node_modules\next\dist\server\image-optimizer.js:563:19)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\work\internal-dashboard\node_modules\next\dist\server\next-server.js:238:72)
    at async C:\work\internal-dashboard\node_modules\next\dist\server\response-cache\index.js:83:36 {
  statusCode: 400
}
ImageError: Unable to optimize image and unable to fallback to upstream image
    at imageOptimizer (C:\work\internal-dashboard\node_modules\next\dist\server\image-optimizer.js:563:19)
    at async cacheEntry.imageResponseCache.get.incrementalCache (C:\work\internal-dashboard\node_modules\next\dist\server\next-server.js:238:72)
    at async C:\work\internal-dashboard\node_modules\next\dist\server\response-cache\index.js:83:36 {
  statusCode: 400
}

在我添加中间件之前，这种情况没有发生，当我在中间件中添加配置匹配器时发生这种情况。这是我制作的中间件上的配置匹配器：

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico|auth/login).*)',
    '/partner/:path*'
  ],
};

我试图_next/image从中间件匹配器中省略。导致部分图片无法加载。

有办法破案吗？或者也许我在制作中间件时忘记了一些东西？

我使用 Next.jsImage组件进行图像优化。它在开发人员上工作得很好，但它不会从生产中的外部 URL 加载图像。

我能做什么？

我正在尝试在我的公司系统上使用 Next.js，但是每当我运行“npm run build”时，构建都会失败并显示以下消息： Error: Cannot find module 'sharp'

我尝试安装sharp，但出现此错误：

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.10.5/libvips-8.10.5-win32-x64.tar.br 
ERR! sharp getaddrinfo ENOTFOUND github.com 
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies

这可能是因为出于安全原因，我的系统终端上阻止了 github URL。有没有办法在不从github中获取的情况下安装sharp？我可以在浏览器上访问 GitHub，所以如果从那里下载文件然后以某种方式安装它是可能的，我可以这样做。

操作系统：Windows 10