Taro.showToast时找不到图片image

codlin commented 4 years ago

问题描述

Taro.showToast中引用了图片，但该图片无法被打包到微信小程序中

复现步骤

dva.ts代码：

import Taro from '@tarojs/taro';
import sadImg from '../assets/images/sad.png';
...

function createApp(opt?: any) {
  // redux日志
  if (process.env.NODE_ENV === 'development') {
    opt.onAction = [createLogger()];
  }

  opt.onError = (err: any) => {
    console.error(err);
    Taro.hideLoading();
    Taro.showToast({ title: '服务器错误', image: sadImg });
  };

  ...
}

期望行为

../assets/images/sad.png被打包到微信小程序中

报错信息

sad.png没有被打包，Taro.showToast({ title: '服务器错误', image: sadImg });时找不到图片

系统信息

开发环境信息：

taro info
Taro CLI 2.0.7 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD

taro doctor
� Taro v2.0.7

√ 诊断完成

检查 Taro 配置 
  [✓] 没有发现问题

检查依赖
  [✓] 没有发现问题

package.json

{
    "name": "aaa",
    "version": "1.0.0",
    "private": true,
    "description": "aaa",
    "templateInfo": {
        "name": "default",
        "typescript": true,
        "css": "sass"
    },
    "scripts": {
        "build:weapp": "taro build --type weapp",
        "build:swan": "taro build --type swan",
        "build:alipay": "taro build --type alipay",
        "build:tt": "taro build --type tt",
        "build:h5": "taro build --type h5",
        "build:rn": "taro build --type rn",
        "build:qq": "taro build --type qq",
        "build:quickapp": "taro build --type quickapp",
        "dev:weapp": "npm run build:weapp -- --watch",
        "dev:swan": "npm run build:swan -- --watch",
        "dev:alipay": "npm run build:alipay -- --watch",
        "dev:tt": "npm run build:tt -- --watch",
        "dev:h5": "npm run build:h5 -- --watch",
        "dev:rn": "npm run build:rn -- --watch",
        "dev:qq": "npm run build:qq -- --watch",
        "dev:quickapp": "npm run build:quickapp -- --watch",
        "lint-staged": "lint-staged",
        "prettier": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"src/**/*.scss\""
    },
    "author": "guanyun",
    "license": "MIT",
    "dependencies": {
        "@tarojs/components": "2.0.7",
        "@tarojs/components-qa": "2.0.7",
        "@tarojs/redux": "2.0.7",
        "@tarojs/redux-h5": "2.0.7",
        "@tarojs/router": "2.0.7",
        "@tarojs/taro": "2.0.7",
        "@tarojs/taro-alipay": "2.0.7",
        "@tarojs/taro-h5": "2.0.7",
        "@tarojs/taro-qq": "2.0.7",
        "@tarojs/taro-quickapp": "2.0.7",
        "@tarojs/taro-rn": "2.0.7",
        "@tarojs/taro-swan": "2.0.7",
        "@tarojs/taro-tt": "2.0.7",
        "@tarojs/taro-weapp": "2.0.7",
        "babel-runtime": "^6.26.0",
        "dva-core": "^2.0.2",
        "dva-loading": "^3.0.20",
        "dva-model-extend": "^0.1.2",
        "nerv-devtools": "^1.5.6",
        "nervjs": "^1.5.6",
        "redux": "^4.0.5",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.3.0",
        "regenerator-runtime": "0.11.1",
        "taro-ui": "^2.3.1"
    },
    "devDependencies": {
        "@tarojs/mini-runner": "2.0.7",
        "@tarojs/webpack-runner": "2.0.7",
        "@types/react": "^16.4.6",
        "@types/webpack-env": "^1.13.6",
        "@typescript-eslint/eslint-plugin": "^2.13.0",
        "@typescript-eslint/parser": "^2.13.0",
        "babel-eslint": "^8.2.3",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-preset-env": "^1.6.1",
        "eslint": "^5.16.0",
        "eslint-config-prettier": "^6.3.0",
        "eslint-config-taro": "2.0.7",
        "eslint-plugin-import": "^2.12.0",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-react": "^7.8.2",
        "eslint-plugin-react-hooks": "^1.6.1",
        "eslint-plugin-taro": "2.0.7",
        "husky": "^3.0.5",
        "lint-staged": "^9.3.0",
        "prettier": "^1.18.2",
        "stylelint": "9.3.0",
        "stylelint-config-taro-rn": "2.0.7",
        "stylelint-taro-rn": "2.0.7",
        "typescript": "^3.0.1"
    },
    "lint-staged": {
        "**/*.{ts,tsx,scss}": [
            "prettier --write",
            "git add"
        ]
    },
    "husky": {
        "hooks": {
            "pre-commit": "npm run lint-staged"
        }
    }
}

config/index.js

const config = {
  projectName: 'aaa',
  date: '2020-3-17',
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  babel: {
    sourceMap: true,
    presets: [
      ['env', {
        modules: false
      }]
    ],
    plugins: [
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-object-rest-spread',
      ['transform-runtime', {
        "helpers": false,
        "polyfill": false,
        "regenerator": true,
        "moduleName": 'babel-runtime'
      }]
    ]
  },
  plugins: [],
  defineConstants: {
  },
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {}
      },
      url: {
        enable: true,
        config: {
          limit: 10240 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
          browsers: [
            'last 3 versions',
            'Android >= 4.1',
            'ios >= 8'
          ]
        }
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    },
    esnextModules: ['taro-ui']
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

补充信息

taro-bot[bot] commented 4 years ago

CC @Chen-jj

taro-bot[bot] commented 4 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

Kimbohn commented 4 years ago

我也遇到同样的问题, 发现只要是png图片且底色透明, 就会不显示

millievn commented 4 years ago

我也遇到同样的问题, 发现只要是png图片且底色透明, 就会不显示

尝试改成纯色背景也不行。替换 png 也不行所以有解决方案么

taro-bot[bot] commented 4 years ago

CC @luckyadam

leefinder commented 4 years ago

@qiwang97 @codlin @Kimbohn

按照下面这样处理下，把静态资源通过配置copy过去，引用时下用相对地址

config/index.js
copy: {
patterns: [
{ from: 'src/assets/', to: 'dist/assets' } // 指定需要 copy 的文件
]
}
Taro.showToast({
title: '验证码发送成功',
image: '../../assets/images/toast/success.png',
duration: 1500
})

FlyDamao commented 4 years ago

@qiwang97 @codlin @Kimbohn

按照下面这样处理下，把静态资源通过配置copy过去，引用时下用相对地址
config/index.js
copy: {
        patterns: [
            { from: 'src/assets/', to: 'dist/assets' } // 指定需要 copy 的文件
        ]
}
Taro.showToast({
        title: '验证码发送成功',
        image: '../../assets/images/toast/success.png',
        duration: 1500
})

试了一下，没有实现

front-refined commented 4 years ago

@qiwang97 @codlin @Kimbohn

按照下面这样处理下，把静态资源通过配置copy过去，引用时下用相对地址
config/index.js
copy: {
        patterns: [
            { from: 'src/assets/', to: 'dist/assets' } // 指定需要 copy 的文件
        ]
}
Taro.showToast({
        title: '验证码发送成功',
        image: '../../assets/images/toast/success.png',
        duration: 1500
})
试了一下，没有实现

亲测，试了一下可以，但是要用绝对路径的方式 image: '../../assets/images/toast/success.png'，替换成 image: '/assets/images/toast/success.png',

codlin commented 4 years ago

@qiwang97 @codlin @Kimbohn

按照下面这样处理下，把静态资源通过配置copy过去，引用时下用相对地址
config/index.js
copy: {
        patterns: [
            { from: 'src/assets/', to: 'dist/assets' } // 指定需要 copy 的文件
        ]
}
Taro.showToast({
        title: '验证码发送成功',
        image: '../../assets/images/toast/success.png',
        duration: 1500
})
试了一下，没有实现
亲测，试了一下可以，但是要用绝对路径的方式 image: '../../assets/images/toast/success.png'，替换成 image: '/assets/images/toast/success.png',

亲测了一下，有效，谢谢。

config/index.js
copy: {
        patterns: [
            { from: 'src/assets/', to: 'dist/assets' } // 指定需要 copy 的文件
        ]
}

需要使用的地方：

// 不使用导入的方式，直接引用绝对路径
// import sadImg from '../assets/images/sad.png';
Taro.showToast({ title: '服务器错误', image: '/assets/images/sad.png', icon: 'none' }).then((res) => console.log(res));

关闭当前Issue，谢谢大家~

NervJS / taro