Setup the default style by baseAttars

This is an example of specifying the imgix setting and the default value of the class name by setting baseAttrs.

Settings

Setup the default values to imgix Provider of <nuxt-img>
Specify utilities of Tailwind CSS
Apply maximum size to 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)
}

Writing

The image has resized when describe width height
- Cropping mode by crop in modifiers
Edit A default class names by describe class attribute
Resize the image that has large 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"
}

Results

<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>