nuxt-image へ再構築する
nuxt-image に再構築する場合のサンプル設定とサンプルです。
ここでは、provider に imgix を利用している前提で記述します。
設定
nuxt-image の provider 設定が必要です。
nuxt.config.js
{
image: {
imgix: {
baseURL: "https://images.microcms-assets.io/",
},
},
}
あわせて rehype-image-salt の設定も行います。
nuxt.config.js
{
content: {
markdown: {
rehypePlugins: [
[
"@hankei6km/rehype-image-salt",
{
baseURL: "https://images.microcms-assets.io/",
rebuild: {
tagName: "nuxt-img",
baseAttrs: 'provider="imgix" data-salt-q=""',
},
},
],
],
},
}
}
-
baseURLはproviderと同じ値にする -
tagNameはnuxt-imgまたはnuxt-picture -
baseAttrsはprovider="imgix" data-salt-q=""providerは Provider を指定するためdata-salt-qは CMS 等が付与したクエリーを除去するため(nuxt-image とコンフリクトする)- コンテンツ全体でのデフォルト値があるなら他のパラメーター(
fitsizesmodifiersなど)も利用可能
記述例
sizes
{
width="600" height="337"
sizes="sm:100vw md:50vw lg:400px"
}
fit
{
width="200" height="400"
fit="cover"
}
imgix best practices
{
width="300" height="400"
fit="cover"
modifiers="auto=format,compress&crop=faces"
}
{
width="300" height="400"
fit="cover"
modifiers="auto=format,compress&crop=faces"
}
ベース属性を利用することで「imgix best practices」をより簡易に記述できます。
