Next.js－使用圖片

藏了蠻多小細節。

簡述

很簡單，只要把對應的圖片丟到 /public 底下後在存取就行了：

import Link from 'next/link'

export default function Navbar() {
  return (
    <nav>
      <h1 className='logo'>
        <img src='/logo.png' />
      </h1>
      <Link href='/'>
        <a>Home</a>
      </Link>
      <Link href='/about'>
        <a>About</a>
      </Link>
      <Link href='/ninjas'>
        <a>Ninja Listing</a>
      </Link>
    </nav>
  )
}

不過比起用 <img> Next 會更推薦你用內建的 <Image> 元件來處理：

import Image from 'next/image'
import Link from 'next/link'

export default function Navbar() {
  return (
    <nav>
      <h1 className='logo'>
        <Image src='/logo.png' alt='ninjas' width={128} height={77} />
      </h1>
      <Link href='/'>
        <a>Home</a>
      </Link>
      <Link href='/about'>
        <a>About</a>
      </Link>
      <Link href='/ninjas'>
        <a>Ninja Listing</a>
      </Link>
    </nav>
  )
}

要注意使用 <Image> 一定要提供寬跟高，next 會自動幫你處理 RWD 的問題，除此以外還會自動幫你做「Lazy Loading」的功能，算是一個很棒的功能。

載入外部圖片

當你透過「網址」來引入外部圖片時，可能會看到這個錯誤訊息：

簡單來說這是 Next 為了避免 XSS 攻擊而使用的一種措施，你必須列出一份「白名單」來告訴 Next「我信任哪些 Domain 下的資源？」

所以要加上這段 config 設定：

// next.config.js
module.exports = {
  images: {
    domains: ['assets.example.com']
  }
}

更多詳細可以參考官方文件的說明。

layout（props）

在 Image 中有一個 layout props 可以用來調整圖片的尺寸，詳細可以參考官方文件，這邊簡單說明一下用途。

預設值是intrinsic，就是依照 width 和 height 的尺寸來設置圖片，不過在做 RWD 的時候就會碰到這個問題：

這邊圖片的 width 和 height 的值設為 200，所以他就只會是這個尺寸，不會隨著容器來做縮放。

這時候就可以改成 responsive，讓他自動填滿容器的寬，達到 RWD 的效果：

我覺得這應該是會很常用的一個值，所以可以記起來。至於其他的選項可以到我寫的 範例 自己玩玩看。