uni-app npm包引用包内图片，原生APP云打包apk图片无法显示（运行时H5、小程序、APP均正常）

uni-app npm包引用包内图片，原生APP云打包apk图片无法显示（运行时H5、小程序、APP均正常）

操作步骤：

  • 项目中依赖npm包，npm包内组件引用包内图片资源，进行原生APP-云打包

预期结果：

  • npm包内图片资源，原生APP-云打包出来的应用能正常显示图片

实际结果：

  • npm包内图片资源，原生APP-云打包出来的应用无法显示图片

bug描述：

附件图片中红框内的npm包，包内组件引用了assets目录图片资源（相对路径），原生APP-云打包生成的apk安装后，app内图片无法显示出来。 注意：运行时，无论在H5,微信小程序,安卓模拟器(夜神),安卓真机，图片显示都是正常的！ 开发环境产生的app目录结构 和 生产环境产生的app目录结构 不一致。生产环境下会移除node_modules目录

开发环境 版本号 项目创建方式
HBuilderX 3.1.22 HBuilderX

Image Image Image


更多关于uni-app npm包引用包内图片，原生APP云打包apk图片无法显示（运行时H5、小程序、APP均正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

这个问题难道没人能来说下吗？

更多关于uni-app npm包引用包内图片，原生APP云打包apk图片无法显示（运行时H5、小程序、APP均正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


同样的代码，在开发环境跑起来没任何问题（H5,小程序,App），生产环境下就产生问题了，是否能保持前后一致，提供下配置参数来解决这个问题

调试了你们webpack file-loader配置 无论 开发环境 生产环境，publicPath outputPath 配置输出是一致的，图片是有进行处理的，但是最终整合成.apk时，是否是主动移除了node_modules目录，这个点无法验证

暂时的解决方案，APP打包时，小于1G的图片都转成base64
vue.config.js module.exports = {
configureWebpack: config => {
// 暂时解决原生APP打包，node_modules下的包图片无法显示的问题
if (process.env.UNI_PLATFORM === ‘app-plus’ && process.env.NODE_ENV === ‘production’) {
config.module.rules[1].use[0].options.limit = 1024000000;
}
}
}

缺失的 node_modules 目录，添加到反编译后的apk assets\apps\AppID\www 目录内，然后重新打包 重新签名，安装后图片竟然是可以正常显示的，就搞不懂打包后为啥要把 node_modules 目录去掉（难道是ios有兼容问题？） 贼难受哦 hbuilderx uni-app的作者们

这个问题是由于云打包时npm包内的图片资源没有被正确复制到apk中导致的。开发环境下图片正常显示是因为直接引用了node_modules中的资源，但生产打包时会移除node_modules目录。

解决方案：

  1. 将图片资源放在static目录（推荐） 将npm包中引用的图片复制到项目的static目录下，然后修改引用路径为绝对路径/static/xxx.png

  2. 使用require动态引入 在组件中使用require动态引入图片：

    <image :src="require('@/node_modules/包名/assets/图片名.png')" />

  3. 配置copy-webpack-plugin 在vue.config.js中配置webpack，将npm包中的图片复制到打包目录：

    const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                { 
                    from: 'node_modules/包名/assets', 
                    to: 'static/npm-assets' 
                }
            ])
        ]
    }
}
回到顶部