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
をつけないといけないことに留意してください。
設定
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" />
参考
以下の資料を参考にさせていただきました。