我正在運行一個反應和下一個 js 專案。如果我使用如下例所示的基本影像標簽，
const IMG_API = 'http://localhost:5000/public/xIx0o7qgT-diet-nutrition.png';
<img
src={IMG_API}
alt={name || t('text-card-thumbnail')}
width={178}
height={178}
className="object-cover rounded-full"
/>
它成功地從我的節點 js 服務器獲取影像檔案。當我從瀏覽器復制影像地址時，它指向正確的地址“http://localhost:5000/public/xIx0o7qgT-diet-nutrition.png”
但是當我使用像下面的例子這樣的 Image 組件時，
<Image
src={IMG_API}
alt={name || t('text-card-thumbnail')}
width={178}
height={178}
className="object-cover rounded-full"
/>
它不獲取影像檔案，而是顯示 alt。當我從瀏覽器復制影像地址時，地址看起來像'http://localhost:3000/_next/image?url=http://localhost:5000/public/xIx0o7qgT-diet-nutrition。 png&w=256&q=100'
請問有什么問題嗎？
uj5u.com熱心網友回復：
將自定義加載器添加到您的影像：
<Image
loader={() => imageUrl}
src={IMG_API}
alt={name || t('text-card-thumbnail')}
width={178}
height={178}
className="object-cover rounded-full"
/>
為了快取影像和更好的性能，在 next.config.js 中添加你的服務器域：
module.exports = {
reactStrictMode: true,
images: {
domains: ['localhost:5000'],
},
}
然后你可以從 Image 中洗掉 loader
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/416321.html
標籤：
上一篇：在組件React中添加子路由