使用“导出”脚本不显示 NextJS 图像

Question

我有一个简单的 NextJs 应用程序。

\n

当我在本地主机上运行应用程序时，一切似乎都工作正常 - 所有图像均按预期显示

\n

当我使用此脚本时：下一个构建 && 下一个导出\n并浏览到我的本地构建时，我看不到图像，而是\xc2\xa0its\xc2\xa0"alt"\xc2\xa0text

\n

我导入图像的方式：

\n

import React from \'react\';\nimport Image from \'next/image\';\n\nimport someImage from \'../../../public/images/some-image.png\';\n\n\nconst Main = () => {\n    return (\n        <div>\n            <Image\n                src={someImage}\n                alt="Some Image"\n                placeholder="blur"\n            />\n        </div>\n}\n\n

\n

next.config.js

\n

/** @type {import(\'next\').NextConfig} */\nconst configuration = {\n    reactStrictMode: true,\n    eslint: {\n        dirs: [\'./src\'],\n        ignoreDuringBuilds: true,\n    },\n    images: {\n        loader: \'akamai\',\n        path: \'\',\n    },\n};\n\nmodule.exports = configuration;\n

\n

我的代码设计：\n

\n

环境: \n"next": "13.1.6",\n"react": "18.2.0",

\n

此外，我尝试使用普通的 img 标签，但它导致了同样的问题。

\n

如果这里有人遇到同样的问题，我将不胜感激任何帮助！

\n

Answer 1

请参阅此页面： https: //nextjs.org/docs/messages/export-image-api

You are attempting to run next export while importing the next/image component using the default loader configuration.

However, the default loader relies on the Image Optimization API which is not available for exported applications.

因此，当运行静态 NextJS 应用程序时，export您不能使用 NextJS 优化，因为它应该在不存在的服务器上运行。您应该使用云解决方案（https://nextjs.org/docs/api-reference/next/image#loader-configuration）或删除优化：

You are attempting to run next export while importing the next/image component using the default loader configuration.

However, the default loader relies on the Image Optimization API which is not available for exported applications.

（https://nextjs.org/docs/api-reference/next/image#unoptimized）