taro src引用图片，编译后小程序报错 渲染层错误，即路径错误

[liukexina]

原生小程序经过taro convert 转为taro后 将图片src 采用require('...')形式，编译后小程序报错，查看打包后的static文件夹有该图片，路径也没问题 原因：转换为h5 可以正常加载，但小程序不可以 因为 h5 用了 3.0 的 url-loader，之前小程序用的还是 2.0，即用require(''), 而 3.0 有个 Breaking Changes，默认设置了 esModule 为 true。现在改用 3.0，意思默认都需要 require().default

[liukexina]

还有其他方式：

1. 使用import引入静态资源 taro静态资源引入
2. src正常写路径'../../static/logo.png' 而不用require，这样写不会将static静态资源打包到dist中，需要手动配置将静态资源克隆到指定位置

   copy: {
   patterns: [
     { from: 'src/static/', to: 'dist/static/' },
   ],
   options: {
   }
   },

   copy配置

3. 设置mnin.imageUrlLoaderOption

   mini: {
   imageUrlLoaderOption: {
     limit: 1024,
     mimetype: 'image/png',
     encoding: 'base64',
     esModule: false,   // 默认true，限制条件1024下转为base64, false代表均转为base64
   },
   }

   但不建议设置esModule: false

   • 相比网络图片，使用base64编码的方式，减少加载图片的http请求次数，没有因网络加载而带来的延时。
   • base64编码只是一种编码方式，不是一种压缩方式，它实际上会增加图片本身的大小（在我之前的文章有介绍过），图片越大增加的越多。
   • 相比网络图片，如果是大图进行base64编码，和多一次http请求的耗时比起来，显然划不来。