Question

在我的Vue原生应用中，我想显示本地的SVG图像。

为此，我尝试了react-native-svg-uri（https://github.com/vault-development/react-native-svg-uri）。我遵循的使用步骤是：-

npm install 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

可能是您使用的是反应本机方式而不是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
}

在本地使用svg图像

2 个答案: