ベース属性の利用

baseAttrs を利用することで imgix などのデフォルト値を指定する例です。

設定

<nuxt-img> の imgix Provider 用のデフォルト値を指定(imgix best practices と同様の設定になる)
Tailwind CSS のユーティリティを指定
width の最大値を指定

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkToRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

import imageSalt from '@hankei6km/rehype-image-salt'

const rebuild = async (source: string) => {
  const html = await unified()
    .use(remarkParse)
    .use(remarkToRehype)
    .use(imageSalt, {
      baseURL: 'https://...',
      command: 'rebuild',
      rebuild: {
        tagName: 'nuxt-img',
        baseAttrs:
          'provider="imgix" data-salt-q="" fit="cover" modifiers="auto=format,compress&crop=entropy" class="rounded" dasa-salt-max-w="1200"'
      }
    })
    .use(rehypeStringify)
    .freeze()
    .process(source)
  return String(html)
}

記述

width height を指定するとリサイズされる
- modifiers でcrop を指定するとクロップモードが変更される
class を記述することで、デフォルトのclassを変更する
大きい width はリサイズされる

![川を下るカヌー](https://.../path/to/image1.jpg){
  width="600" height="400"
}

![考え込んでいる人](https://.../path/to/image2.jpg){
  width="300" height="500"
  modifiers="crop=faces"
}

![ロゴ](https://.../path/to/logo-light.png){
  width="600" height="400"
  class="light-img -rounded"
}

![ロゴ](https://.../path/to/logo-dark.png){
  width="600" height="400"
  class="dark-img -rounded"
}

![広大な空間](https://.../path/to/large.jpg){
  width="4800" height="2400"
}

出力

<p><nuxt-img src="/path/to/image1.jpg" alt="川を下るカヌー" provider="imgix" fit="cover" :modifiers="{&#x22;auto&#x22;:&#x22;format,compress&#x22;,&#x22;crop&#x22;:&#x22;entropy&#x22;}" class="rounded" width="600" height="400"></nuxt-img></p>
<p><nuxt-img src="/path/to/image2.jpg" alt="考え込んでいる人" provider="imgix" fit="cover" :modifiers="{&#x22;auto&#x22;:&#x22;format,compress&#x22;,&#x22;crop&#x22;:&#x22;faces&#x22;}" class="rounded" width="300" height="500"></nuxt-img></p>
<p><nuxt-img src="/path/to/logo-light.png" alt="ロゴ" provider="imgix" fit="cover" :modifiers="{&#x22;auto&#x22;:&#x22;format,compress&#x22;,&#x22;crop&#x22;:&#x22;entropy&#x22;}" class="light-img" width="600" height="400"></nuxt-img></p>
<p><nuxt-img src="/path/to/logo-dark.png" alt="ロゴ" provider="imgix" fit="cover" :modifiers="{&#x22;auto&#x22;:&#x22;format,compress&#x22;,&#x22;crop&#x22;:&#x22;entropy&#x22;}" class="dark-img" width="600" height="400"></nuxt-img></p>
<p><nuxt-img src="/path/to/large.jpg" alt="広大な空間" provider="imgix" fit="cover" :modifiers="{&#x22;auto&#x22;:&#x22;format,compress&#x22;,&#x22;crop&#x22;:&#x22;entropy&#x22;}" class="rounded" width="1200" height="600"></nuxt-img></p>