如何直接下载Vuetify v-image组件展示的图片？右键保存问题求解

方案一：利用img插槽替换为原生img #

Vuetify的v-image组件内置img插槽，可直接替换内部渲染元素为原生<img>，恢复右键保存功能，同时复用组件的props配置：

<v-image src="your-image-url" alt="图片描述">
  <template v-slot:img="{ props }">
    <img v-bind="props" />
  </template>
</v-image>

方案二：自定义右键事件实现下载 #

通过监听右键事件，手动创建下载链接触发图片保存，无需修改组件结构：

<v-image
  src="your-image-url"
  @contextmenu.prevent="saveImage"
></v-image>

<script setup>
const saveImage = (e) => {
  // 提取背景图URL（v-image默认用背景图渲染）
  const imgUrl = e.target.style.backgroundImage.match(/url\(['"]?(.*?)['"]?\)/)[1];
  const link = document.createElement('a');
  link.href = imgUrl;
  link.download = '自定义文件名.jpg'; // 设置下载后的文件名
  link.click();
};
</script>

方案三：直接使用原生img并复用Vuetify样式 #

若不需要v-image的懒加载、占位图等额外功能，可直接用原生<img>标签，添加v-image类保持样式一致：

<img
  src="your-image-url"
  class="v-image"
  alt="图片描述"
/>

内容的提问来源于stack exchange，提问作者dfy