Skip to content
This repository has been archived by the owner on Mar 7, 2024. It is now read-only.

[BUG] tabbar icon 图片如果放置到非一级的目录下,编译以后出现icon 无法找到的错误 #224

Closed
magicshui opened this issue Sep 14, 2019 · 3 comments
Labels
bug Something isn't working

Comments

@magicshui
Copy link
Contributor

magicshui commented Sep 14, 2019

bug 描述
如果 Tabbar 引用的图片路径超过一级,那么将会导致编译以后会将图片放到根目录下,而不是原有的目录,但是 app.config.js 中定义的路径还是之前的路径,导致 tabbar 无法找到icon 文件;

比如, tabbar icon 图片放到 src/customize/resources 下,但是编译以后,图片会被放到 dist/resources 下,js 正常编译到 dist/customize/resources 下;

由于 app.config.js 中定义的路径会引用 dist/customize/resources 导致小程序报错

复现步骤

  1. 创建一个微信项目
  2. 将 Tabbar Icons 的图片放到 src/customize/resources/ 目录下
  3. 编译
  4. 开发工具打开

期望结果
期望能够正常展示小程序的 Icon

复现代码

module.exports = {
  pages: ['pages/index/index', 'pages/secondary/secondary'],
  window: {
    navigationBarTitleText: 'Remax Wechat Template',
    navigationBarBackgroundColor: '#282c34'
  },
  tabBar: {
    selectedColor: '#ffffff',
    backgroundColor: '#212121',
    color: '#ffffff',
    borderStyle: 'black',
    list: [
      {
        pagePath: 'pages/index/index',
        text: '首页',
        iconPath: './customize/resources/find.png',
        selectedIconPath: './customize/resources/find_active.png'
      },
      {
        pagePath: 'pages/secondary/secondary',
        text: '其他',
        iconPath: './customize/resources/guide.png',
        selectedIconPath: './customize/resources/guide_active.png'
      }
    ]
  }
};

版本信息:

  • remax 版本: [e.g. 1.1.0-alpha5]
  • 小程序端 微信小程序
  • 开发环境 mac OS

其他信息

@magicshui magicshui added the bug Something isn't working label Sep 14, 2019
@magicshui
Copy link
Contributor Author

目测可能是 rollup-plugin-url 的配置问题:

https://github.com/remaxjs/remax/blob/develop/packages/remax-cli/src/build/rollupConfig.ts#L116

添加一个 sourceDir 的参数,好像可以解决:

url({
      limit: 0,
      fileName: '[dirname][name][extname]',
      publicPath: '/',
      sourceDir: path.join(__dirname, 'src'), 
      include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.jpeg', '**/*.gif'],
    }),

插件文档:https://github.com/rollup/rollup-plugin-url#sourcedir

@magicshui
Copy link
Contributor Author

应该是所有的图片,编译以后都会出这个问题,就是图片编译后所在的目录和实际代码目录不一定一致;

@magicshui
Copy link
Contributor Author

#225

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant