Taro Image 组件使用 SVG

示例代码（React）

import { Component } from 'react';

import { View, Image } from '@tarojs/components';

export default class PageView extends Component {

render() {

return (

style='width: 300px; height: 100px; background: #fff;'

src='path/to/your/image.svg'

svg

/>

style='width: 300px; height: 100px; background: #fff;'

src='https://example.com/image.svg'

svg

/>

);

}

}

详细解释

style 属性：用来设置图片的样式，如宽度、高度、背景颜色等。

src 属性：这是图片的资源地址，可以是本地路径，也可以是网络地址。

svg 属性：这是一个布尔属性，指定是否解析 svg 格式的图片。如果要使用 svg 图片，必须设置这个属性为 true。

注意事项

请确保 svg 图片路径是正确的，并且 svg 图片是有效的。

在 svg 图片只支持 aspectFit 模式，这意味着图片会保持纵横比进行缩放，以显示完整的内容。

组件属性（ImageProps）

除了上述关键属性，还可以根据需要使用以下属性：

mode：设置图片的裁剪、缩放模式，svg 图片默认支持 aspectFit。

lazyLoad：布尔值，是否启用图片懒加载，仅在 page 与 scroll-view 下有效。

onLoad：图片加载完成时触发的事件。

onError：图片加载失败时触发的事件。