在 Vue 3 中,你可以通过几种方式使用 SVG 图片。以下是一些示例:

# 使用 <img> 标签直接引入 SVG 文件:

<template>
  <img src="@/assets/your-image.svg" alt="Your Image">
</template>

# 将 SVG 作为组件导入并使用:

首先,将 SVG 文件保存到你的组件目录中,并在 Vue 单文件组件中导入并注册为组件。

// YourSvgComponent.vue
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
    <!-- Your SVG content here -->
  </svg>
</template>
 
<script>
export default {
  name: 'YourSvgComponent',
  // Your component options here
};
</script>

然后,你可以在另一个组件中导入并使用这个 SVG 组件:

// AnotherComponent.vue
<template>
  <div>
    <your-svg-component></your-svg-component>
  </div>
</template>
 
<script>
import YourSvgComponent from './YourSvgComponent.vue';
 
export default {
  components: {
    YourSvgComponent
  },
  // Your component options here
};
</script>

# 使用 Vue 的 v-html 指令直接将 SVG 内联到模板中:

<template>
  <div v-html="svgContent"></div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const svgContent = ref(null);
 
    onMounted(() => {
      fetch('path/to/your-image.svg')
        .then(response => response.text())
        .then(data => {
          svgContent.value = data;
        });
    });
 
    return { svgContent };
  }
};
</script>

选择最适合你的场景的方法来使用 SVG 图片。记得确保 SVG 文件的路径是正确的,特别是在使用 <img> 标签或者 v-html 指令时。