标签: next-images

Image我正在使用 Nextjs ，一个基于 React 的框架，并且我正在尝试在Next.js 提供的组件中显示 logo.png 图像。

我有这个文件夹：public/img

这是我的代码：

<Image
  src={'/img/logo.png'}
  width='154'
  height='82'
  alt='logo'
  layout='responsive'
  priority={true}
/>

我在控制台中收到此错误：

资源 http://localhost:3001/_next/image?url=%2Fimg%2Flogo.png&w=640&q=75 已使用链接预加载进行预加载，但在窗口加载事件后的几秒钟内未使用。请确保它具有适当的as 值并且是有意预加载的。

有什么帮助吗？

我在 NX monorepo 中创建了一个 nextjs 应用程序，并开始将现有的 NX 应用程序（在同一个 monorepo 中）移植到其中。

我的 NX monorepo 设置了许多别名，所有别名都在根tsconfig.base.json文件中配置。例如，我将所有图像保存在图像库中，并从 JSX 中像这样加载它们：

import myImage from '@images/myImage.png';

这是我在 SCSS 文件中使用别名的方式：

background-image: url('@images/myImage.png');

这两个应用程序都可以在我现有的非 Nextjs 应用程序中工作，但是，当我将应用程序移植到新的 Nextjs 应用程序时，url()无法识别其中使用的别名。我得到的错误看起来像这样：

Module not found: Can't resolve '../themes/@images/myImage.png'

请注意，我的 css 文件位于其中，./themes因此它将别名@images/...url 视为相对路径并将它们附加到当前文件位置。

在 scss 中使用时正确处理别名路径的推荐方法是什么？

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

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

我怎样才能做到这一点？

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

我正在使用 next/image 来渲染我的图像，如下所示：

<Image 
 src={imageLink} 
 width="1920" 
 height="512" 
 alt="Hero Image" 
/>

这对于 750 像素以上的屏幕宽度来说是很好的。

当用户在手机或平板电脑上（屏幕宽度750px以下）访问时，如何将高度更新为“612”？

我正在尝试将文件中的 SVG 图像导入 Next.js 组件。

在资产文件夹中，我有 google.svg（图标）：

<svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
    <g fill="none" fillRule="evenodd">
      <path
        d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
        fill="#4285F4"
      />
      <path
        d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
        fill="#34A853"
      />
      <path
        d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
        fill="#FBBC05"
      />
      <path
        d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
        fill="#EA4335" …

我在从 public/images 文件夹提供静态图像时遇到问题。

它正确显示在我迄今为止正在处理的文件中，除了动态文件 [itemId].js （如下图所示）

我得到的最有趣的线索是控制台中的这个错误。

http://localhost:3000/items/_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=1920 404 (Not Found)

它尝试从 /items 提供服务，这根本不是我想要的......

有谁知道这背后的诡计是什么？如果您需要更多信息，请告诉我。

http://localhost:3000/items/_next/static/image/public/images/banner-big.f496e182c5dd297c1d1c030d9b7436d8.png?auto=format&fit=max&w=1920 404 (Not Found)

由 <Image /> 组件生成的 img 如下所示，并且在我的所有页面上都是相同的：

// in components/Header.js (which is wrapping all of my pages)
import bannerBig from "../public/images/banner-big.png";

// then i use it this way with the Image component from next/image
 <Image src={bannerBig} alt="midnight city" width={1920} height={800}/>

你们知道什么可能会导致这个错误吗？我们将非常感谢您的帮助。这个错误突然开始，无法找出原因。我找到的与此主题相关的任何来源也没有帮助，例如 npm 清除缓存等。

error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\dGhpP2cdrThITYfJW5zYTASPDxgkrHRsKGV+DHjA9zg=\0.1644007067863.49adoDywz9oh2itwLAOxco3SX+8Yk8UjPaOwcMHXKIw=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\4XzO9vkSresQcu4SX685Pbl3Cb8+GLnoRVSy6EWXt5Y=\0.1644007067864.yV8JGEcK4N5RHfOP1YCy50EVKU0ZtA8shhISYdcO9cQ=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\P0c16eKt464UeqAGlMPK9QsWSCanffokfdynMp877IQ=\0.1644007067876.CuEqtaf2wyvhSmvWM7JEkbGjhFFUEs9KqFQ-2+tjghc=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\-Q0UZI-9z63T0kTLDD9WriKzJMRU4ezA+i4LmDQDXlM=\0.1644007067831.UiZIuijWkV1W07Pfo02XjEvnKc-DlxzW0O3wLCqz-hM=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\INra01gHa2-vzBW63AhvPMn+t5fHxh8cp5pivirhiRA=\0.1644007067837.NvV+tAwZT5uhgQUBvxIUsk1gLqUnDgarmgOlSAv2Oos=.webp'
error - uncaughtException: Error: ENOENT: no such file or directory, open 'C:\Users\merth\Documents\GitHub\nextjs\.next\cache\images\5IOk0AWjSzsxeWX3JUtAxUOeibv3HkY1OaLS3xWD1P0=\0.1644007067823.BNmZ25sRS8r8aebBo4tpl77uOHrZp-hK7huYDJCA2YI=.webp'

我的一些图像组件；

<figure className='w-full h-full overflow-hidden …

在next.config.js- 我添加了使用 SVG 图像所需的配置。

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');

module.exports = withCSS(
  withSass(
    {
      webpack: (config) => config,
      distDir: '../_next'
    },
    withImages({
      webpack(config, options) {
        return config;
      }
    })
  )
);

这是我的 SVG 文件，位于下一个文件夹下/client/assets/googleIcon.svg。

也许问题出在 SVG 文件中。我没有使用 SVG 的经验，这个 SVG 正确吗？

<svg version="1.1" width="100%" height="100%" viewBox="0 0 25 25">
  <g fill="none" fillRule="evenodd">
    <path
      d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
      fill="#4285F4"
    />
    <path
      d="M12.5 21c2.295 0 4.22-.76 …

我正在使用 next.js 11.1.0 ，我的图像没有显示（下图）。我尝试升级到 next.js 12 但问题仍然存在。我也尝试使用 img 标签，它工作正常，只是 next/image 不起作用。它似乎不适用于现场制作。我的图像存储在本地。有人遇到过这种情况吗？

                    <Image
                     src="images/Uploads/Activities/StoryTelling/3_2022-05-07203A383A38.jpeg"
                      width={500}
                      height={500}
                    />

我有一个具有多个图像的英雄，我想根据屏幕尺寸显示图像，例如，如果用户使用大屏幕，英雄将加载大/宽图像，如果他使用手机，英雄将加载显示宽度不适合屏幕的不同图像。我不知道如何使用 nextjs 执行此操作，无法指定在不同屏幕上加载哪个图像。