Next.jsの最新バージョンで追加されたnext/imageを試しています。publicフォルダに保存された画像は表示されるのですが、外部から読み込んだ画像が表示されません。
To enable Image Optimization for images hosted on an external website, use an absolute url for the Image src and specify which domains are allowed to be optimized. This is needed to ensure that external urls can't be abused.
上の公式ドキュメントの記述に従ってドメインを設定したのですが、設定が足りないのでしょうか?
デプロイ先はVercelです。ちなみにテスト環境では外部URLの画像も表示されます。
アドバイスを頂けるとありがたいです。
error
1Failed to load resource: the server responded with a status of 400 ()
next.config.js
js
1module.exports = { 2 images: { 3 path: '/_next/image', 4 domains: ['thumbnail.image.rakuten.co.jp'], 5 }, 6}; 7
pages/index.js
js
1import Head from 'next/head'; 2import styles from '../styles/Home.module.css'; 3import Image from 'next/image'; 4 5export default function Home() { 6 return ( 7 <div className={styles.container}> 8 <Image 9 src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8681/9784062748681.jpg?_ex=200x200" 10 alt="book-cover-img" 11 width={105} 12 height={148} 13 loading="lazy" 14 /> 15 <Image 16 src="/neko.jpg" 17 alt="neko-img" 18 width={105} 19 height={105} 20 loading="lazy" 21 /> 22 </div> 23 ); 24} 25
あなたの回答
tips
プレビュー