在Vue3中展示图片、预览图片，详解，常见场景、常见问题与最佳解决方案

在 Vue3 中实现图片展示和预览是常见需求，以下是详细解决方案和最佳实践：

---

一、基础图片展示

1. 静态图片展示

<template>
  <!-- 使用绝对路径 -->
  <img src="/public/logo.png" alt="Logo">
  
  <!-- 使用相对路径（推荐 assets 目录） -->
  <img :src="require('@/assets/image.jpg')" alt="Image">
</template>

2. 动态图片展示

<template>
  <img :src="imageUrl" alt="Dynamic Image">
</template>

<script setup>
import {
      ref } from 'vue';
import image1 from '@/assets/image1.jpg';

const imageUrl = ref(image1); // 直接引用本地图片
// 或从 API 获取
// fetchImage().then(url => imageUrl.value = url);
</script>

---

二、图片预览方案

1. 简单预览（弹窗模式）

<template>
  <img :src="thumbUrl" @click="showPreview(originalUrl)">
  <div v-if="isPreviewing" class="preview-modal">
    <img :src="previewImage">
    <button @click="isPreviewing = false">关闭</button>
  </div