标签: nextjs-image

我在隐藏的图库中有一堆图像，仅当用户单击某个按钮时才显示。

在开发服务器上，一切都很好，没有错误或问题，但是当我部署网站并打开图库时，图像不会显示，并在控制台中抛出 404 错误（我包含了所需的道具）。

当我用 替换<Image/>组件时<img>，开发服务器上的一切都很好。有人可以帮忙吗？我搜索了很多，但没有找到类似这个问题的内容。

我们正在将我们的应用程序从 Create React App 转换为 Next.js。

Next.js 应该从 AWS 加载图像，但这种情况没有发生。为什么？

几天前它起作用了。您认为这是缓存问题还是什么？

你有什么想法吗？

在 Next.js 中，应用程序从此本地 URL 加载图像：

http://localhost:3000/_next/image?url=https%3A%2F%2Fticket-t01.s3.eu-central-1.amazonaws.com%2Fob8h_0.cover.jpg&w=1200&q=100

next.config.js:

const { nextI18NextRewrites } = require("next-i18next/rewrites");

const localeSubpaths = {
  hu: "hu",
  en: "en"
};

module.exports = {
  rewrites: async () => nextI18NextRewrites(localeSubpaths),
  publicRuntimeConfig: {
    localeSubpaths
  },
  images: {
    domains: ["ticket-t01.s3.eu-central-1.amazonaws.com"]
  }
};

1 图片标签：

<Image
  src={`https://ticket-t01.s3.eu-central-1.amazonaws.com/${props.imgId}_0.cover.jpg`}
  className={styles.imageEventMain}
  alt="main event"
  layout="responsive"
  width={1795}
  height={1000}
  quality={100}
/>;

在 React 中，AWS 或图像加载没有问题。

编辑

尝试访问图像时的console.log：

I\xe2\x80\x99m 在我的 Headless 项目中实现 Next.js Image 组件。我\xe2\x80\x99m使用的CMS是WordPress。由于图像来自外部网站，我需要指定 上的域next.config.js，如文档指定：

https://nextjs.org/docs/basic-features/image-optimization

const nextConfig = {\n    image: {\n        domains: [\'https://example.com\'],\n    },\n}\n

但在我的next.config.js文件 I\xe2\x80\x99ve 已经有这个配置：

const withStyles = require(\'@webdeb/next-styles\');\n\nmodule.exports = withStyles({\n    sass: true,\n    modules: true,\n});\n

所以我的努力​​是将这两者结合在配置文件中。

仅对于某些上下文，没有图像配置，我遇到此错误：

\n

错误： src 属性无效next/image，您的图像下未配置主机名next.config.js

\n

我尝试使用以下代码将其组合在一起next-compose-plugins，但错误不断显示：

const withStyles = require(\'@webdeb/next-styles\');\nconst withPlugins = require(\'next-compose-plugins\');\n\nconst nextConfig = {\n    image: {\n        domains: [\'https://example.com\'],\n    },\n}\n\nmodule.exports = withPlugins([\n    [withStyles({\n        sass: true,\n        modules: true,\n …

在我的应用程序中，我允许用户上传他们的图像。上传后，它会进入公共文件夹，并且在数据库中只有一个用于将来请求的直接链接。

当在页面上显示这些图像时，我遇到了问题。Image组件想要知道每个图像的高度和宽度。所以我也想知道。

在这种情况下，工作流程有哪些可用选项？上传时处理和请求时处理都适合我。

这是我的 Nextjs Image 组件的代码：

...  Cell: ({ value }: CellType) => (
  <Image
    priority
    src={value}
    loader={() => value}
    className={''}
    height={100}
    width={100}
    alt={'profile_picture'}
  />
),

这是否意味着我需要一个自定义加载程序函数来消除警告？谢谢！

我将 next-optimized-images 与 next.js v11.0.1 一起使用，并且还安装了imagemin-mozjpeg imagemin-optipng imagemin-svgo. SVG 图像工作正常，但当我尝试使用 .png 或 .jpg 图像时，不会显示任何图像，而是显示 alt 属性文本或显示损坏的图像。详细信息如下：

图像大小：13 KB

JSX部分

import MyImage from "../public/images/MyImage.png";

<img src={MyImage} alt="some text" />

next.config.js

// config for next-optimized-images
const withOptimizedImages = require("next-optimized-images");

module.exports = withOptimizedImages({
  handleImages: ["jpeg", "png", "svg", "gif", "ico"],
  optimizeImagesInDev: true,
});

包.json

{
  "name": "dintreuhaender",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": …

我已经将我的下一个 js 代码与一些静态图像设置到系统中，用作

<Image
  height={50}
  width={140}
  alt="Alt"
  objectFit="contain"
  src="/images/logo.png"
/>

但现在我必须使用 来部署它basePath: '/product。网址工作正常，但图像未加载，我需要/product/images/logo.png在每个 src 之前使用。

有没有办法在 next.config.js 中进行设置，而我不必为系统中的每个图像更改它？

我使用以下代码来显示图像：

import Image from 'next/image'
// ...
<Image src={ausrufezeichen} alt="Ausrufezeichen"/>

正在呈现以下 HTML 代码：

<div style="display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
    <div style="box-sizing:border-box;display:block;max-width:100%">
        <img style="max-width:100%;display:block;margin:0;border:none;padding:0" alt="" aria-hidden="true" role="presentation" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjciIGhlaWdodD0iMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIvPg=="/>
    </div>
    <noscript>
        <img alt="Ausrufezeichen" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=96&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Fimg%2Fpfeile_punkte%2Ficon_ausrufezeichen.d442fe0f12568980c7889dc07a018b24.png&amp;w=256&amp;q=75" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
    </noscript>
    <img alt="Ausrufezeichen" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" decoding="async" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"/>
</div>

当我刚刚使用“SEO Minion”检查我的 SEO 状态时，我注意到我看到了很多没有 alt 标签的图像。为什么第一张图片显示时没有 alt 标签？我可以以某种方式在那里添加一个吗？

我只想指定图像高度并保持图像纵横比而不对宽度进行硬编码。

在传统img元素中我可以这样做：

<img src="/logo.png" alt="logo" height={30} />

但如果我尝试使用next/image：

<Image src="/logo.png" alt="logo" height={30} />;

我收到以下错误：

错误：带有 src“/logo.png”的图像必须使用“width”和“height”属性或“layout='fill'”属性。

我正在尝试创建一个网站，它使用一些文件，例如带有图像的文件夹，我已将这些图像文件夹保存在项目的公共目录中，它在本地主机上运行良好，但是当我尝试使用生产设置部署它时，它无法访问公共目录的这些子文件夹。

这里的问题是，当构建项目时，公共目录的文件被发送到 _next/static/media 目录，但公共目录的子文件夹没有添加。如何将公共目录的子文件夹添加到媒体目录，以便我可以使用 src='subfolder/image.png' 访问其中的图像

我尝试了一些下一个 js 配置设置，或使用 import 导入文件夹，但没有成功。我希望在构建后将我的子文件夹添加到媒体文件夹中。我不想对文件夹的每个文件都使用导入。