當我試圖添加一個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。 這個錯誤在終端右側，所以 “public”文件夾在根級別公開，因此不需要指定public文件夾
試試這個- src = & quot/logo icon/logo orange . png & quot；
而不是- src = & quot/public/logo icon/logo orange . png & quot；
解決方案2 .如果你在控制臺得到400錯誤請求錯誤
那么這是一個普通的客戶端錯誤
檢查-& gt； a) URL字符串語法 b)緩存和cookie損壞 c)檢查圖像是否太大 d)檢查命名文件夾中是否有任何空白
我也是剛剛開始瀏覽Next.js，對為什么我的圖片沒有顯示感到困惑。 在多次更改格式并檢查源代碼后。看起來這些圖像實際上存放在公共文件夾中
解決我形象問題的方法:
所以在下面的目錄中添加圖片:
public/images/[放置圖像文件]
這就是我的問題所在。希望這能幫助其他人。
如果服務器給你一個回復，說& quot收到的文本/html；charset = utf-8 & quot；，試著分析一下誤差。你可以看到服務器顯示& quot這是您請求的UTF 8格式的文本/HTML內容。
檢查圖像的來源是否正確。如果圖像存在，試著檢查文件服務器返回給你的文本/HTML內容。
只需刪除圖像名稱前的/public部分。 公開公共文件夾，并由NEXT.JS自動搜索和理解。
所以make/public/test . jpg = & gt；/test.jpg
嘗試直接使用& quot/& quot；而不是& quot/public & quot；像這樣
<Image src={`/image.png`} alt="something" height={150} width={200}/>因此，自從Next13的形象改變以來，唯一有效的就是這樣的設置。請注意，他們還選擇了移除objectFit屬性來支持樣式——我真的不明白這背后的基本原理，因為這感覺有點退步！
但無論如何，我希望這對你們有些人有所幫助。你不必稱它為“imageAsset ”,這只是一個例子——只要它在你的公共文件夾中，你就可以叫它什么:)
我想我應該打出一點例子，因為我知道有些人是新來的，可能還沒有完全理解實現。
注意:從映像src或import中刪除/public/并不適用于所有情況，因為您的映像可能不直接位于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]'一樣導入它似乎可以工作。
對我來說，另一個進程正在端口3000上運行。您可以通過在Mac終端中運行以下命令來找到該進程。
$ lsof -i :3000之后，您可以從活動監視器中終止該進程。在我的例子中，NodeJS的另一個實例使用端口3000。
今天面對這個問題。似乎是next/ dynamic的問題，無法正確加載圖像。不是一個道德的解決方案，但不是動態地導入你的組件和圖片，這似乎可以解決我的問題。
為我工作: 將所有圖像放在public/(assets或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} />如果您使用的是nextjs 13，并且遇到了這個問題，您必須將圖像作為一個對象從公共文件夾中導入，例如:
import placeHolder from '../../../../../public/placeholder.jpg';并在圖像組件中使用它，如下所示:
<Image
width={120}
height={60}
src={placeHolder}
alt="brand"
/>您也可以使用樣式，例如，如果您想在div中設置背景圖像，您可以這樣做:
<div style={{ backgroundImage: `url(${placeHolder.src})`}}>
</div>