タグのセルフクロージングは以降のマークダウンが無視されます。必ず閉じタグを記述するようにしてください。
<image-loader/>のようなケースはダメです。
先日導入した@nuxt/content で画像をどうやって最適化するか模索して、nuxt-optimized-images が良さそうだったので紹介します。
こちらは公式ドキュメントに従って、インストールしました。
今回は png 画像だけできれば良かったので、最適化に使うパッケージは 1 つだけにしています。
yarn add -D @aceforth/nuxt-optimized-images imagemin-pngquant
もし他の種類も最適化したい場合は、追加でインストールします。
詳細は公式ドキュメントで確認してください。
次に nuxt.config.ts にモジュールを追加します。
{
buildModules: [
'@aceforth/nuxt-optimized-images',
],
optimizedImages: {
// モジュールのオプション
optimizeImages: true
}
}
一般的なマークダウン記法であればのようにすれば表示することができます。
しかし、今回のパッケージで最適化するには別の方法で行います。
<!-- ~/components/ImageLoader.vue -->
<template>
<img :src="require(`~/assets/images/${this.file}`)" alt="" />
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
@Component
export default class ImageLoader extends Vue {
@Prop({ required: true })
public file!: string
}
</script>
props で使用する画像ファイル名を指定するようにしました。
このように、require('画像パス')とすることで画像の最適化が自動的に行われるようになります。
<!-- ~/pages/index.md -->
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { ImageLoader } from '~/components/ImageLoader.vue'
@Component({ components: { ImageLoader } })
export default class Index extends Vue {}
</script>
マークダウンを処理するコンポーネントに先ほど作成した、ImageLoader.vue を追加しておきます。
---
title: '画像を表示する`
---
## ここに画像を表示します
<image-loader file="ファイル名" />
これでnuxt generateすることでハッシュ化された、ファイルが出力されるようになります。
画像のリサイズはさらにパッケージの追加が必要です。
yarn add -D responsive-loader sharp
sharp は jimp でもいいようですが、jimp は遅いみたいです。
リサイズのアクションは require するときに、サイズを決めなくてはいけません。
size を動的にしたくて props を追加してやってみたのですが、うまくいかなかったので決め打ちで設定することにしました。
以下のように ImageLoader.vue を変更します。
<template>
<img :src="resizeImage.src" alt="" />
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
@Component
export default class ImageLoader extends Vue {
@Prop({ required: true })
public file!: string
public resizeImage = require(`~/assets/images/${this.file}?resize&size=600`)
}
</script>
---
title: '画像を表示する`
---
## ここに画像を表示します
<image-loader file="ファイル名"></image-loader>
これで任意のサイズ、今回はwidth: 400pxにリサイズされた画像を出力できるようになりました。
<image-loader/>のようなケースはダメです。
マークダウンに vue コンポーネントが混じってしまうのが気持ち悪いですが、これで画像も自由なサイズで表示できました。
次回はレスポンシブの表示にも対応していきたいです。