在 vue-native 中使用 svg 图片答案

【问题标题】：use svg images in vue-native在 vue-native 中使用 svg 图片
【发布时间】：2019-10-02 14:20:37
【问题描述】：

在我的 vue-native 应用程序中，我想显示本地的 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')" />

【问题讨论】：

标签： javascript react-native expo vue-native

【解决方案1】：

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

就在脚本标签内的export default之前需要添加：

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

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

并且可以在template里面使用：

<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
}

【讨论】：

【解决方案2】：

难道你正在使用的是一种反应原生的方式来做这件事，而不是 vue native？我相信语法有点不同。但是我确定它应该可以工作，也许您可以更改尝试并将 vue 本机语法与此进行比较并弄乱它

【讨论】：