class.exe

画像をクリックするとオリジナルサイズで拡大してオーバーレイ表示するコンポーネントを作ってみました。

Vuetifyのv-imgコンポーネントを利用したVueコンポーネントは下記のとおりです。

<template>
<div>
  <figure>
    <v-img
      @click="overlay = true"
      :src="src"
    ></v-img>
    <figcaption>{{img.caption}}</figcaption>
  </figure>
  <v-overlay
    :value="overlay"
    opacity="0.6"
  >
    <v-img
      @click="overlay = false"
      :src="src"
      width="100vw"
    ></v-img>
  </v-overlay>
</div>
</template>

<script>
export default {
  data() {
    return {
      src: require('~/static' + this.img.src),
      overlay: false
    }
  },
  props: ['img']
}
</script>

Markdownファイルには上記のVueコンポーネントをケバブケースで参照します。

<overlay-img :img="{'src':'/click.png', 'caption':'画像をクリックするとオリジナルサイズで拡大してオーバーレイ表示します'}"></overlay-img>

リファレンス

• Overlay component — Vuetify.js
• javascript - Vue cannot find the dynamic source of the vuetify v-img element - Stack Overflow