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

pb3skfrl  于 2023-02-08  发布在  其他
关注(0)|答案(2)|浏览(144)

我有一个简单的NextJs应用程序。
当我在本地主机上运行应用程序时,一切似乎都运行良好-所有图像都按预期显示
当我使用这个脚本时:下一个版本&&下一个导出并浏览到我的本地版本,我没有看到图像,而是看到了它的“alt”文本
导入图像的方式:

import React from 'react';
import Image from 'next/image';

import someImage from '../../../public/images/some-image.png';

const Main = () => {
    return (
        <div>
            <Image
                src={someImage}
                alt="Some Image"
                placeholder="blur"
            />
        </div>
}

next.config.js

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

module.exports = configuration;

我的代码设计:

环境:“下一个”:“13.1.6”、“React”:“18.2.0”,

而且,我试着使用一个普通的img标签,它也会引起同样的问题。
如果这里有人面临同样的问题,我将感谢任何帮助!

vojdkbi0

vojdkbi01#

请参阅本页: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.

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

module.exports = {
  images: {
    unoptimized: true,
  },
}

(未优化)

5vf7fwbs

5vf7fwbs2#

从公用文件夹静态导入某些内容时,它已经知道您在其中。您只需要执行以下导入操作:

import someImage from 'images/some-image.png';

相关问题