React Next で img の src を相対参照したい。

file-loader と url-loader が必要になります。意外と手間がかかります。

用例

/pages/index.js から /posts/title/eye-catch.jpg を参照するシーンを想定しています。

// /pages/index.js
(
  {/* ルート相対パス */}
  <img src={require('../posts/title/eye-catch.jpg').default} />

  {/* 絶対パス(エイリアスによる) */}
  <img src={require('@/posts/title/eye-catch.jpg').default} />
)

プロパティに default をつけないといけないことに留意してください。

Webpack file-loader outputs [object Module] - Stackoverflow

設定

file-loader, url-loader を追加して、

$ npm install -S file-loader url-loader

以下のコードを next.config.js に追記します。

// next.config.js
module.exports = {
  webpack (config, options) {
    // image
    config.module.rules.push({
      test: /\.(png|jpg|gif|svg)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          fallback: {
            loader: 'file-loader',
            options: { publicPath: '/_next/static/images', outputPath: 'static/images' }
         }
        }
      }
    })

    // ailias
    config.resolve.alias['@'] = __dirname
    
    return config
  },
}

背景

ブログの記事を作成するにあたり、各記事のディレクトリに画像を配置したいと思いました。公式ドキュメントには public に置くものがありますが相対パスの参照はなかったため、まとめました。

First, let’s talk about how Next.js handles static assets such as images. Next.js can serve static files, like images, under the top-level public directory. Files inside public can be referenced from the root of the application similar to pages. If you open pages/index.js in your application and take a look at the <footer>, we refer to the logo image like so:
<img src="/vercel.svg" alt="Vercel Logo" className="logo" />

Next > Learn > Assets, Metadata, and CSS > Asset

参考

以下の資料を参考にさせていただきました。