标签: nextjs-image

我在使用 NextJS 的组件时遇到了困难Image。我想设置一个横幅图像。无论屏幕尺寸如何，该图像在任何时候都只能覆盖屏幕上的一定空间。max-height: 30vh我已经让它主要与和的组合一起使用overflow: hidden。但是，当屏幕尺寸发生变化时，我似乎无法使图像居中。它应该从看到整个图像到聚焦在床上有所不同。相反，它的重点是图片的天花板。

实时示例：https ://codesandbox.io/s/nextjs-image-layout-lc7vb?file=/src/pages/index.tsx

const Index = (props: IBlogGalleryProps) => (
  <Main
    ...
  >
    <div className="w-full overflow-hidden" style={{ maxHeight: '30vh' }}>
      <Image width="300" height="200" layout="responsive" src="https://images.unsplash.com/photo-1519494080410-f9aa76cb4283?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" />
    </div>
    ...
  </Main>
);

我可以将“next/image”中的元素图像放入其中吗{ position: absolute; left: 50% }？看来并没有受到影响。

例子：

import React from 'react'
import Image from 'next/image'
import styled from 'styled-components'

const Container = styled.div`
  position: relative;
`

const Test = styled(Image)`
 position: absolute;
 left: 50%;
`

const Page: React.FC = () => {
  return (
    <Container>
      <Test src{someImg.webp} width={500} height={500} objectFit="none" />
    </Container>
  )
}

export default Page;

我正在使用 NEXT/Image 组件并面临这个问题：

当我在 chrome 上打开源代码时，图像 src 是这样的：

https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

但是当我让谷歌在搜索控制台中抓取网站并查看谷歌如何看待它的代码时，我看到的图像网址如下：

https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100​

URL 已将“&”字符更改为“& amp;” 这会阻止 google 对图像建立索引，因为此 URL 会出现以下错误：

400：BAD_REQUEST 代码：INVALID_IMAGE_OPTIMIZE_REQUEST

谷歌无法抓取这些图像并将其编入索引，因为它似乎是一个损坏的链接。

知道为什么会发生这种情况吗？

谢谢。

所以我遇到了两个问题。首先，我使用 Firebase 授权 GitHub 和 Google 登录，因此我在导航栏中将人员头像显示为个人资料图像。现在我的代码中一切正常，直到我切换<img>到<Image>- 然后我收到这两个错误：

这是我使用头像的片段：

import Image from 'next/image'
import { useAuth } from '@/lib/auth';
const DashboardShell = ({ children }) => {
      const { user, signout } = useAuth();
    
      return (
            <Link href="/account" passHref>
              <a>
                <Image
                  src={user?.photoUrl ?? ''}
                  width="96"
                  height="96"
                  alt="profile avatar"
                />
              </a>
            </Link>
      )
      
    }

现在，当我使用img代替 时Image，头像就会出现并工作。当我将其切换到时，Image我收到错误，并且我 console.log'd 并user?.photoUrl显示为undefined，因此我保留了 console.log 并切换回img，我注意到页面加载后控制台日志显示未定义然后立即记录 URL，因此其日志记录未定义，并且 url。

这几乎就像在检索头像 URL 之前尝试加载下一个图像。 …

我目前正在使用 NextJs 和 TailwindCss 开发一个页面。用户能够在本地加载图像并设置他们希望将图像分割成的水平/垂直（行/列）的数量。为了正确显示它，我需要将网格设置为正确的数量父元素中的列。

我有一个在本地调用的 API，它使用 Sharp 来执行分割并计算宽度和高度，并且我对数组中的图像进行排序，以便它们按顺序排列，因为它是异步的。然后，我还生成一个动态类字符串，该字符串仅填充适当数量的列，以便稍后分配给我的父网格元素类。

类串种群

const gridClass = `grid grid-cols-${numCols} gap-2 pt-2`;

//*** At this point, the value of gridClass, if columns were set to 3, using template literals is :

'grid grid-cols-3 gap-2 pt-2'

//The proper string is now populated and passed back in the API response via classCss key

res.status(200).json({ msg: 'Success splitting', tileData: tiles, classCss: gridClass})

页面片段：

<div id="final">
  <div className={tileCss} > //<--This is where I pull in the generated class string …

我试图将我的代码推送到 Vercel，但在检查类型的有效性时，它在构建步骤中失败。

这是收到的完整错误：

info  - Checking validity of types...\nFailed to compile.\n./node_modules/next/dist/client/image.d.ts:19:14\nType error: Cannot find name \'StaticImageData\'.\n\n

我尝试将 Next.js 版本回滚到 11，但\xe2\x80\x99 不起作用。

编辑：

我发现了这个类似的 Github 问题，但它似乎没有多大帮助。

https://github.com/vercel/next.js/issues/29788

当Next Js Image组件与外部镜像一起使用时，需要在next.js配置文件中输入镜像源的域名。对于来自多个域的多个图像（例如，100 个不同的图像 URL），我如何能够在 next.js 配置文件中输入所有 100 个域。为了节省时间，而不是手动输入数百个域名，最好的方法是什么？谢谢

我正在使用 next.js 框架开发网站。我在 Google Chrome 中的图像组件遇到一些问题。它加载的质量很差。但是当您从浏览器下载该图像时，它具有完美的质量。其他浏览器没问题。

           <Image
              src={url}
              layout='responsive'
              quality={100}
              height={500}
              width={1250}
            />

我尝试清除缓存，但没有帮助。也许 chrome 错误地告诉了浏览器的大小。如何修复 Chrome 中的图像质量？

使用 Nextjs，预期结果是看到图像组件渲染为 .WebP 或 .AVIF，但它仍然是 jpg -

下面是我的 next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  images: {
    domains: ['cdn.sanity.io'],
    formats: ['image/avif', 'image/webp'],
  },
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [{ loader: '@svgr/webpack', options: { icon: true } }],
    });
    return config;
  }, };

以下是 next/image 组件：

   <Image
                          className="kitchen-img"
                          loader={myLoader}
                          loading="lazy"
                          layout="fill"
                          objectFit="cover"
                          src={urlFor(kitchen.mainImage).url()!}
                          alt={kitchen.title}
                        />

知道为什么它没有以 avif/webp 的形式出现吗？我缺少什么？

const myLoader = ({ src, width, quality }: any) => {
return `${src}?w=${width}&q=${quality || 85}`  };

我正在尝试通过修复 Google Lighthouse 报告的所有问题来优化我的 Next.js 应用程序。

目前它在图像方面最重要的缺陷之一：

根据文档static，Next.js 自动对文件夹中的媒体执行此操作

Next.js 自动将缓存标头添加到 /_next/static 提供的不可变资产中，包括 JavaScript、CSS、静态图像和其他媒体。

由于所有这些有问题的图像都来自 API，该 API 由 AWS CloudFront 提供服务，因此我找不到解决问题的方法。

我想Cache-Control在 CloudFront 中添加建议的策略可能会有所帮助，但我不知道

1.) 如果这是正确的解决方案 2.) 如何在 AWS 控制台中执行此操作

最近，我一直在用 NextJS 做一个项目，它使用 YoutubeAPI 来获取视频信息，包括缩略图 URL。

全分辨率图像的缩略图 URL 如下所示： https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg

但是，有时 YouTube 无法生成全分辨率图像，在这种情况下，图像不会显示在我的网页上。

如果带有 URL 的图像https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg不存在，我希望使用另一个 URL，例如https://i.ytimg.com/vi/${videoId}/hqdefault.jpg

处理这个问题的最佳方法是什么next/image？

我试图从onLoadingComplete道具中获取naturalWidth和naturalHeight：https://nextjs.org/docs/api-reference/next/image#onloadingcomplete但它不起作用？也许我做错了？

const handleImageLoad = (e) => {
  console.log("load", e);
};

<Image
  onLoadingComplete={(e) => handleImageLoad(e)}
  className=""
  src={image["data_url"]}
  alt=""
  layout="fill"
  objectFit="contain"
/>

onLoadingComplete={() => handleImageLoad()}