在使用 Taro 开发时画布上面的图片在 苹果端不显示

最近在使用 Taro 开发小程序的时候, 碰到一个 bug, 在微信开发者工具上看是正常的 (这是因为微信开发者工具还是在电脑上运行的, 而不是真机. 具体情况以真机调试结果为准), 但是真机调试时 画布上的 图片不显示, 最开始是 安卓端和苹果端都不显示. 当时的代码

 <CoverView className='gonwei-box' onClick={() => this.open(false, '')}>
    <CoverImage src={dateBoxIcon} className="image"></CoverImage>
</CoverView>

查看文档发现是因为 cover-image 上面不支持 svg 文件的显示. (因为需要 覆盖在原生组件之上的图片视图。 所以没有使用 image), Taro 的 CoverImage 组件也只是对小程序的 cover-image 进行了一层封装, 原装都不支持它也没办法

 svg 文件不支持只好将它转化为 png 的格式, 根据文档显示 png 格式苹果和安卓都支持实现. 但是在真机调试时, 安卓端可以正常显示, 但是 苹果端显示异常.

最终解决办法

在 config/index.js 文件内

const config = {
    mini: {
        imageUrlLoaderOption: { // 加入该属性, 针对 png | jpg | jpeg | gif | bpm | svg 文件的 url-loader 配置
            limit: 100 // 默认值, 可以按需调小
          }
    }
}