标签: nextjs-image

我想在加载图像时显示骨架。我尝试在 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 …

我知道在 Next.js 中我们有 Image 组件，但我遇到的问题是我不能将它用作普通的 HTML 标签，如<img />. 我必须给它一个布局，但是没有选项可以将它作为普通的 HTML 标签进行控制，除此之外，我不能对它使用成帧器运动。

所以我刚刚安装，next-images所以我当然可以导入图像并使用它们，一切正常，直到我 npm run 构建登录页面以查看一些结果，并且有以下警告：

Failed to compile.

./components/Presentation/Presentation.js
77:13  Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.  @next/next/no-img-element

Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

npm ERR! code ELIFECYCLE

这是我使用img带有样式组件的标签的地方：

<PresentationUnderText2 src="/underText-Presentation.png" alt="" />
<PresentationScissor2   src="/scissors.svg"alt=""/>

我该怎么做才能img正常使用标签？

我有一个@svgr/webpack安装了该库的 Next.js 站点。我已配置next.config.js为可以使用@svgr/webpack，现在想要导入 svg 图像并将其与新next/image组件一起使用。

以下是我设置next.config.js文件的方法：

module.exports = {
  images: {
    domains: ["images.vexels.com"],
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

这就是我想做的：

import Image from 'next/image'
import Logo from '@/svg/logo.svg'

<Image src={Logo} width={174} height={84} />

但是，当我这样做时，我收到以下错误：

Unhandled Runtime Error
TypeError: src.startsWith is not a function

Source
client\image.tsx (278:13) @ Image

  276 | let isLazy =
  277 |   !priority && (loading === 'lazy' || typeof loading …

我正在尝试从 Strapi 获取图像到我的 NextJS 应用程序中，但无论我尝试做什么，我总是收到错误

“url”参数有效，但上游响应无效”

控制台显示：

无法加载资源：服务器响应状态为 400（错误请求）

我已经将“next”更新到最新版本：

这是我的图像代码的片段：

我还可以尝试什么才能不再收到错误？

我正在使用ImageNext.js 中的组件（它是 Next.js 的一个新功能）。我试图提供源网址：

{`${API}/user/photo/${blog.postedBy.username}`}

但它向我展示了这个错误。我也改变了我的next.config.js作为

module.exports = {
    images: {
      domains: ['localhost'],
    },
  }

但没有什么对我有用。如果您对此有所了解，请提供帮助。

我正在运行 Next.js 应用程序和 Storybook 组件库。我想在 Storybook 中使用 next/image ，以便我可以利用图像优化。

我按照这篇文章在 Storbook 中模拟了 next/image。该库使用 rollup 进行捆绑，仅导出由 Next.js 应用程序使用的 React 组件。但是，当在 Next 应用程序中安装时，会引发错误

Nothing was returned from render

我还尝试unoptimised仅在 Storybook 开发模式下将道具传递给 next/image ，因此当它安装在 node_modules 中时，将会有 next.js 应用程序和 next.js 服务器来处理图像，但会被抛出

hostname "...." is not configured under images in your `next.config.js

我已在包根目录中以及带有图像域数组的 next.js 应用程序根目录中包含了一个 next.config.js 文件。

总而言之：

如何在 NPM 组件库中使用 next/image，然后由 Next.js 应用程序使用

我在索引由 Next/Image 组件优化的图像时遇到问题，这些图像位于我的 Next.js 应用程序的公共文件夹中。

我还没有看到任何例子，其中由 Next/Image 组件生成的任何资源/URL（如下所示）已在谷歌图像搜索中建立索引。

这种类型的URL：https://www.example.com/_next/image? url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100

尽管 http 标头中具有资源内容类型：image/jpg，但这些图像未在 google 中建立索引的原因是因为 google 需要在根文件/资源​​/URL 位置抓取资源，如下所示：https://www .example.com/images/home/Dog-image-1.jpg

为什么？http 标头是否具有正确的内容类型？因为google需要确保它知道原始资源，因为它不确定Next/Image生成的URL将保留多长时间，并且它希望在其图像索引中避免此类URL或base64以避免404错误搜索引擎要保持满意的用户体验，就需要直接抓取其所在位置的图片资源，并且必须在html代码中抓取。

现在的问题是：

当使用 Next/Image 组件时，如何让 google 抓取我的 img 标签中的根资源/URL。如果这是不可能的，那么 Next/Image 根本不适用于电子商务或其他依赖大量图像搜索流量的图像相关网站，甚至其他网站也不愿意通过这些 URL 共享您的图像。

有人认为 data-src 属性可以解决这个问题或这里的问题https://nextjs.org/docs/api-reference/next/image#minimum-cache-ttl？

感谢您的时间。

我正在尝试在下面的代码中使用 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: …