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