Taro Image 组件使用 SVG

15 min read

示例代码（React）

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

export default class PageView extends Component {
  render() {
    return (
      <View className='components-page'>
        <Image
          style='width: 300px; height: 100px; background: #fff;'
          src='path/to/your/image.svg'
          svg
        />
        <Image
          style='width: 300px; height: 100px; background: #fff;'
          src='https://example.com/image.svg'
          svg
        />
      </View>
    );
  }
}

详细解释

  1. style 属性：用来设置图片的样式，如宽度、高度、背景颜色等。
  2. src 属性：这是图片的资源地址，可以是本地路径，也可以是网络地址。
  3. svg 属性：这是一个布尔属性，指定是否解析 svg 格式的图片。如果要使用 svg 图片，必须设置这个属性为 true。

注意事项

  • 请确保 svg 图片路径是正确的，并且 svg 图片是有效的。
  • 在 svg 图片只支持 aspectFit 模式，这意味着图片会保持纵横比进行缩放，以显示完整的内容。

组件属性（ImageProps）

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

  • mode：设置图片的裁剪、缩放模式，svg 图片默认支持 aspectFit。
  • lazyLoad：布尔值，是否启用图片懒加载，仅在 page 与 scroll-view 下有效。
  • onLoad：图片加载完成时触发的事件。
  • onError：图片加载失败时触发的事件。