在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指令时。