v-html添加的图片如何实现点击弹出模态框展示大图

要实现点击v-html添加的图片后弹出模态框展示大图的功能，可以使用第三方的图片查看器插件，比如vue-image-lightbox等插件。这些插件可以很方便地实现点击图片后弹出模态框，并支持大图展示、缩放等功能。你可以在需要的地方使用它们来实现你的需求。

具体做法是，在HTML代码中使用img标签来引入图片，然后在img标签上添加@click事件，当用户点击图片时触发该事件，并在事件处理函数中打开图片查看器插件，将图片的URL作为参数传递给插件即可。示例代码如下：

<template>
  <div>
    <div v-html="htmlContent" @click="openImage(index)"></div>
  </div>
</template>

<script>
import VueImageLightbox from 'vue-image-lightbox';

export default {
  components: {
    VueImageLightbox
  },
  data() {
    return {
      htmlContent: '<img src="https://example.com/image.jpg" alt="图片">',
      index: 0,
      images: ['https://example.com/image.jpg']
    };
  },
  methods: {
    openImage(index) {
      this.index = index;
      this.$refs.lightbox.open();
    }
  }
};
</script>

在这个示例中，我们首先使用v-html指令将HTML代码渲染出来，然后在div标签上添加@click事件，当用户点击图片时触发该事件，并调用openImage方法打开图片查看器插件。在openImage方法中，我们首先保存当前图片的索引值，然后调用插件的open方法打开图片查看器，并将图片的URL列表作为参数传递给插件。在模板中，我们还需要使用VueImageLightbox组件来渲染图片查看器的模态框。需要注意的是，我们需要使用ref属性来引用VueImageLightbox组件，并在openImage方法中使用该引用来调用插件的open方法。