我在尝试将 PNG 或 SVG 文件添加到我的代码时遇到错误。我的错误是什么或者我必须改变什么才能让它工作？
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Maintenance</title>
<meta name="description" content="This Website is in Maintenance Mode" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div className={styles.main}>
<h1 className={styles.h1}>This website is currently in</h1>
<break></break>
<h1 className={styles.h2}>Maintenance Mode.</h1>
<Image
src="/public/logoicon/logoOrange.png"
alt="server and database with broken cable"
width={77}
height={33}
/>
<p className={styles.p}>©2022 Karlo-Hosting.com</p>
</div>
</div>
)
}
我的代码在上面。
解决方案1。 这个错误在终端右侧，所以 “公共”文件夹在根级别公开，因此您无需指定公共文件夹
试试这个 - src="/logoicon/logoOrange.png"
而不是- src="/public/logoicon/logoOrange.png"
解决方案 2.仍然如果您在控制台中收到 400 错误请求错误
那么它是一个通用的客户端错误
检查-> a) URL 字符串语法 b) 损坏的缓存和 cookie c) 检查图像是否太大 d) 检查命名文件夹中是否有空格
也刚开始使用 Next.js 并且对为什么我的图像没有显示感到困惑。 多次更改格式并检查来源后。看来图像实际上托管在公用文件夹中
我的形象问题的解决方案：
所以在以下目录添加图片：
public/images/[place image file]这就是我的问题所在。希望这对其他人有帮助。
如果服务器向您发送响应“收到文本/html；字符集=utf-8”，请尝试分析错误。您可以看到服务器说“这是您请求的具有 UTF-8 格式的文本/HTML 内容”。
检查图片来源是否正确。如果图像存在并尝试检查文件服务器发回给您的文本/HTML 内容。
只需删除图像名称前的 /public 部分。 公用文件夹暴露，NEXT.JS自动搜索理解
所以制作 /public/test.jpg => /test.jpg
所以自从 Next13 的图像更改以来唯一有效的是这样的设置。请注意，他们还选择删除 objectFit 支持样式的道具 - 我真的不明白这背后的理由，因为它感觉有点倒退！
但无论如何，我希望这对你们中的一些人有所帮助。您不必将其称为“imageAsset”，这只是一个示例 - 只要它在您的公共文件夹中，它就可以正常工作:)
我想我会打出一些例子，因为我知道有些来这里的人是 Next/React 的新手，可能还没有完全理解实现。
注意： 从图像 src 或导入中删除
/public//public/import Image from "next/image"
import imageAsset from '/public/images/your-image-asset.webp'
export default function Component() {
return (
<>
<Image src={imageAsset} width={1920} height={1080} style={{objectFit: 'cover', objectPosition: 'center'}} />
</>
)
}
像
import img from '/public/[your image here]'对我来说，另一个进程正在
port$ lsof -i :3000
之后，您可以从活动监视器中终止进程。在我的例子中，另一个 NodeJS 实例正在使用端口 3000。
今天遇到这个问题。 next/dynamic 似乎有问题，无法正确加载图像。这不是一个道德解决方案，但不是动态导入带有图像的组件似乎为我修复了它。
为我工作： 将所有图像放在 public/(assets or images) 文件夹中，然后将图像导入 index.js 文件 像这样：
import imagename from './imagename.gif'
import imagename from './imagename.jpg'
import imagename from './imagename.png'
export{
imagename, imagename, imagename
}
然后从 projects/assets/index.js 导入需要的图片 像这样：
import { imagename } from '../public/assets'
像这样在图像中使用它：
<Image src={imagename} />
尝试直接使用“/”而不是像这样的“/public”
<Image src={`/image.png`} alt="something" height={150} width={200}/>