Vue3中动态绑定<g>分组内SVG图片不显示问题求助

失败场景的问题根源 #

你试的几种无效写法，问题出在这：

• 硬写相对路径../assets/Bananas.svg：打包工具会给资源重命名、调整路径，硬编码的路径匹配不上打包后的实际位置。
• 导入/src/assets/Bananas.svg后绑定却不显示：<image>缺了x/y/height属性，可能因尺寸为0隐藏；另外部分场景下需确保资源被打包工具正确解析。
• computed返回/src/assets/Bananas.svg字符串：这只是源文件路径，没经过打包工具处理，找不到打包后的资源。
• 导入/public/Bananas.svg：public目录的资源不会被打包工具处理，不能用import方式引入，直接用根路径即可。

有效解决方案 #

方案1：导入资源后直接绑定（推荐） #

从src/assets导入SVG，打包工具会自动处理路径，补充必要属性确保显示：

<template>
  <div>
    <svg>
      <g>
        <image x="0" y="0" width="200" height="200" :href="Bananas"></image>
      </g>
    </svg>
  </div>
</template>

<script setup>
// 用@别名指向src目录，避免相对路径层级出错
import Bananas from "@/assets/Bananas.svg";
</script>

方案2：动态生成资源路径（适合需要切换资源的场景） #

如果要动态生成路径，用new URL()结合import.meta.url让打包工具解析：

<template>
  <div>
    <svg>
      <g>
        <image x="0" y="0" width="200" height="200" :href="myImageUrl"></image>
      </g>
    </svg>
  </div>
</template>

<script setup>
import { computed } from "vue";

const myImageUrl = computed(() => {
  return new URL("@/assets/Bananas.svg", import.meta.url).href;
});
</script>

方案3：public目录资源用法（不推荐，仅用于无需打包的资源） #

如果资源放public目录，直接用根路径引用，不用导入：

<template>
  <div>
    <svg>
      <g>
        <image x="0" y="0" width="200" height="200" href="/Bananas.svg"></image>
      </g>
    </svg>
  </div>
</template>

核心注意事项 #

• <image>必须加x、y、height属性，否则可能因布局问题不显示。
• 优先用@别名替代相对路径，避免路径层级变化引发错误。
• 动态路径必须通过import或new URL()让打包工具解析，不能直接写源文件路径字符串。

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