Taro框架Image使用本地图片

第一次使用体验了taro框架，遇到了不少问题，大多数都是没有仔细通读文档导致的o(^▽)┛~ 其实taro跟小程序,react都有一点小小的区别，这次我遇的一个非常简单的问题就是。

在小程序中<image></image>是可以使用本地图片的，但是在taro中确不可以直接使用

// 小程序中可以展示
<image src='banner.png' />

// taro中不显示
<Image src='banner.png' />

去官方查询后才发现不能这样写，需要通过ES6 的 import 语法来引用此类文件，拿到文件引用后直接在 JSX 中进行使用

import bannerPng from '../images/banner.png'

<Image src={bannerPng} />

感觉更麻烦一点了有没有~

但是比起小程序有一点更方便，我们知道，在小程序css中是不能直接使用本地图片的，只能使用网络图片或在base64的反正进行资源引用，以前在小程序写背景图片的时候被这个东西也搞得很麻烦，现在在taro中更方便了，可以直接使用

  <View class='bg'></View>

  // css
  .bg{
    background: url('../images/banner.png') 
  }

其原理是通过PossCss的post-url插件将样式中本地资源引用转换成base64格式

另外，根据官网文档描述

Taro 默认会对 1kb 大小以下的资源进行转换，如果需要修改配置，可以在 config/index.js 中进行修改，配置位于 weapp.module.postcss。

• 具体配置如下

// 小程序端样式引用本地资源内联
url: {
  enable: true,
  config: {
    limit: 10240 // 设定转换尺寸上限
  }
}