如何解决Vue打包后静态资源图片失效的问题？

【概念释义】

打包后图片失效多因路径错误：开发时用绝对路径 /img/a.png 部署到子目录失效；或 assets 未走构建处理。应用 import/require、new URL(..., import.meta.url)（Vite）或放 public 并保持正确 base。

【基础使用】

<template>
  <img :src="logoUrl" alt="logo" />
</template>
<script setup>
"qb-hl-comment">// Vite
import logo from '@/assets/logo.png';