当在Vue 3中使用Markdown发布文章并尝试实现图片放大缩小、灯箱方式预览时，可能会面临一些挑战。在搜索引擎中未找到现成的解决方案后，我决定自己动手解决这个问题。项目中使用了Element Plus UI组件库，其中的"Image"组件可以用于将小图片放大预览。然而，实际效果与期望的仍有一定差距。

首先，文章中的图片通常不是小图，并且Markdown语法中的图片格式是Markdown的语法与html中的img格式完全不同。其次在点击任意一张图片时让其初始展示在第一张，这都需要一些额外的处理。

为了解决这些问题，我考虑了以下方案：

1. 使用Element Plus的Image组件： 尽管该组件主要设计用于预览小图，但其中包含一个名为<el-image-viewer/>的图片预览组件。令人意外的是，尽管它并未在官方文档中明确介绍，实际上确实可以直接使用。

2. 解决图片索引问题： 与直接使用Image组件不同，这里需要处理点击文章中任何一张图片时，确保在灯箱中能够动态初始化显示第一张图片。

3. 处理Markdown语法中的图片链接： 考虑编写逻辑，通过解析Markdown内容中的图片链接，将其转换为适用于所选择的图片库或组件的格式。

效果展示-(点击图片预览):

实现思路：

  watch(articleData, () => {
    nextTick(() => {
      articleData.value.content = articleData.value.content.replace(
          /!\[([^\]]*)\]\(([^)]*)\)/g,
          function (match, alt, src) {
            if (!allImage.includes(src)) {
              allImage.push(src);
            }
            return match;
          }
      );
    });
  });

• 利用Vue 3的watch组件监听文章内容字段articleData，一旦有值，使用正则表达式匹配并将内容中的所有图片存储在allImage数组中。

• 将allImage传递给组件，实现图片预览功能。

• 只有当文章内容包含图片格式时，才处理点击效果。在allImage图片数组中，将点击的图片的索引传递给组件，以实现点击后图片的初始化显示。

<v-md-preview :text="articleData.content" @copy-code-success="handleCopyCode" @click="handleImageClick"></v-md-preview>
<el-image-viewer v-if="imageBoxShow" :url-list="allImage"  :initial-index="initialIndex" @close="imageBoxClose()"/>

function handleImageClick(event){
  try {
    if (event.target.tagName === 'IMG') {
      const clickedImageSrc = event.target.src.trim();
      const cleanedImageArray = allImage.map(src => src.trim());
      initialIndex.value = cleanedImageArray.findIndex(src => src === clickedImageSrc);
      if (initialIndex.value !== -1) {
        imageBoxShow.value = true;
      }
    }
  } catch (error) {
    console.error('An error occurred in handleImageClick:', error);
  }
}