标签: nextjs-image

当我想导出 nextjs 应用程序时，它说我无法在静态网站上导出图像。

错误：使用 Next.js 的默认加载器进行图像优化与next export. 可能的解决方案： - 用于next start运行服务器，其中包括图像优化 API。- 使用任何支持图像优化的提供商（如 Vercel）。- 配置第三方加载器next.config.js。- 使用loader道具next/image。

我怎样才能做到这一点？

有没有办法让我简单地告诉它静态渲染图像？我不想浏览其他在线图像加载器。

我有一个 Next.js 应用程序，我需要一个图像来填充其容器的整个高度，同时根据其纵横比自动确定其宽度。

我尝试了以下方法：

<Image
    src="/deco.svg"
    alt=""
    layout="fill"
/>

此代码段编译成功，但在前端，我看到以下错误：

错误：带有 src "/deco.svg" 的图像必须使用 "width" 和 "height" 属性或 "unsized" 属性。

这让我困惑，因为根据该文档，在这些属性不使用的时候需要layout="fill"。

我正在创建一个对象数组，其中有一个名称为 的图像 src 属性coverSrc，并将其导出并导入到我的主要组件中。在我的主要组件中，我使用 Material UI CardMedia 组件来显示图像。但它给了我以下错误：

src 属性无效next/image，主机名“res.cloudinary.com”未在您的图像下配置next.config.js

data.js

export const dataList = [
{
    id: 1,
    title: "Dim Sums",
    serviceTime: "24-30min",
    deliveryFee: 1.5,
    category: "dish",
    cuisine: "chinese",
    rating: 2,
    price: 4100,
    coverSrc: "https://res.cloudinary.com/arifscloud/image/upload/v1625119382/image_apxesv.png",
  },
{
    id: 2,
    title: "Dim loups",
    serviceTime: "22-35min",
    deliveryFee: 1.3,
    category: "dish",
    cuisine: "italian",
    rating: 3,
    price: 3100,
    coverSrc: "https://res.cloudinary.com/arifscloud/image/upload/v1627596941/image_apiop.png",
  },
]

ListItem.jsx

import {
  Card,
  CardHeader,
  Avatar,
  CardMedia,
  CardContent,
  Typography,
} from "@material-ui/core";
import React from "react"; …

在 Material UI 中，显示图像的组件具有图像参数。例如：

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />\n

Next.js v10 中有一个新的Image自动缩放图像的组件：\xc2\xa0https://nextjs.org/docs/api-reference/next/image\xc2\xa0

有人知道如何Image在 Material UI 中使用新组件吗？

我有一个 Next.js 应用程序正在部署到 Heroku。当我在本地开发时，我看到图像，但是当我推送到 Heroku 并检查站点时，图像出现 404。我有一个公共文件夹，其中图像 (.png) 就在文件夹中，以及我引用的代码像这样的图像

<Image
    src="/wb_blue_white.png"
    alt="WB Concept"
    width="70"
    height="70"
    className={navStyles.logo}
/>

无论是本地还是在产品中，如果我查看图像源，它们都是相同的src="/_next/image?url=%2Fwb_blue_white.png&w=256&q=75"，但我在产品中得到 404。是什么导致图像显示在本地主机上，但不在 Heroku prod 构建中？

包.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p $PORT"
},

文件结构

components
pages
public

我是新手，NextJS但在 ReactJS 和 Webpack 方面有很好的经验。我的问题是 NextJS 提供了一个包'next/image'。我想非常深入地了解或理解为什么我应该使用他们的包来加载图像而不使用默认img标签。

在他们的文档中，他们说了这样一句话We can serve an optimized image like so。它们是什么意思Optimized Image以及为什么 ReactJS 或任何其他包不这样做？

我正在尝试将下一个图像组件添加到我的项目中。

我有一个问题，当我添加layout='responsive'.

代码：

<Box>
    <Link href='/' >
        <Image src='/images/logoDark.svg'
            alt='navbar-logo'
            width={260}
            height={56}
            layout='responsive'
        />
    </Link>
</Box>

有解决办法吗？或者任何其他方式来优化图像？

我想在加载图像时显示骨架。我尝试在 NextJS 提供的onLoad新Image组件中传递一个 prop，但该函数在加载图像之前触发。

这是我的代码

const [loaded, setLoaded] = useState(false);

<Image
  src={src}
  alt={""}
  className={styles.image_tag}
  onLoad={(e) => setLoaded(true)}
  style={{ opacity: loaded ? "1" : "0" }}
  layout={"fill"}
/>

{!loaded && (
  <Skeleton
    className={styles.skeleton}
    variant={"rect"}
    animation={"wave"}
  />
)}

我正在使用 Next.js 10.0.7 和 next-images 1.7，大图像需要几秒钟才能出现。

我正确使用了这些组件，您可以在下面看到，但我认为我的问题有一个解决方案。

<Image
   height="600"
   width="800"
   src={
     'https://myImageURL.png'
   }
   alt="my image"
/>

一些问题：

• 如果我将所有图像转换为 .webp 图像显示速度会更快吗？
• 这个问题有解决方案吗？

我正在使用 react dropzone 在我的简单应用程序中上传多图像。为了显示哪种类型的图像被删除，我使用 TypeScript 制作了一个单独的组件。但是 Next.js 图像 src 显示错误，如类型：

'{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & ImageProps'.
  Type '{ src: string; alt: string; }' is not assignable to type 'ObjectImageProps'.
    Types of property 'src' are incompatible.
      Type 'string' is not assignable to type 'StaticImport'.

渲染文件.ts：

'{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & ImageProps'.
  Type '{ src: string; alt: string; }' is not assignable to type 'ObjectImageProps'.
    Types …