在vue-native中使用svg图像

Question

在我的vue原生应用程序中，我希望显示本地的SVG图像。

为此，我尝试了react-native-svg-uri (https://github.com/vault-development/react-native-svg-uri)。我使用它的步骤如下：

npm安装react-native-svg-uri --save

react-native链接react-native-svg

然而，当我尝试使用以下任何方法在屏幕上呈现svg时，它什么也不显示：-

<svg-uri width="200" height="200" source="{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}"/>

<svg-uri width="200" height="200" :svgXmlData="testSvg"/>

<svg-uri :source="require('../../assets/images/colour.svg')" />

Answer 1

您使用的是react原生方法而不是vue原生方法吗？我认为语法有点不同。但是，我不确定它是否可以工作，也许您可以尝试将vue原生语法与此语法进行比较，并对其进行修改

Answer 2

Vue Native具有运行React Native插件的功能。

在导出脚本内的默认标记之前，需要添加以下内容：

import Vue from 'vue-native-core'
import { SvgUri } from 'react-native-svg';

Vue.component('svg-uri', SvgUri)

并且可以在模板中使用

<svg-uri :width="25" :height="25" :uri="image_url"></svg-uri>

或者，使用以下命令将组件自动转换为kebab case (hyphen-delimited)：

export default {
  components: { SvgUri }, // now svg-uri can be used
}