我有一个简单的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标签,它也会引起同样的问题。
如果这里有人面临同样的问题,我将感谢任何帮助!
2条答案
按热度按时间vojdkbi01#
请参阅本页:https://nextjs.org/docs/messages/export-image-api
因此,当使用
export
运行静态NextJS应用时,您不能使用NextJS优化,因为它应该在不存在的服务器上运行。您应该使用云解决方案(https://nextjs.org/docs/api-reference/next/image#loader-configuration)或删除优化:(未优化)
5vf7fwbs2#
从公用文件夹静态导入某些内容时,它已经知道您在其中。您只需要执行以下导入操作: