图片加载不出来 打入默认图片

本文介绍了一种使用JavaScript处理图片加载失败的方法,通过onerror事件指定默认图片路径,并确保仅加载一次,避免无限循环的问题。

一个图片链接<img src="" /> 想用js 判断url是否有效如果404 就加载默认的图片路径

<img src="xxx" onerror="this.src=默认图地址"/>

图片标签img的 onerror事件

<img src="pic.gif" onerror="javascript:this.src='默认图地址';" alt="pic" />

分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中为 img 指定一个默认图片。也就是说图片存在则显示 pic.gif,图片不存在将显示默认图片。

存在的问题:如果默认图片也不存在,则继续触发 onerror,导致循环,故出现错误。如果图片存在,但网络很不通畅,也可能触发 onerror。

解决方法:通过函数加载默认图片,仅加载一次

<img src="abc.jpg" onerror="nofind()" />
<script type="text/javascript">
function nofind(){
var img=event.srcElement;
img.src="http://mat1.gtimg.com/cd/2017/home/nlogo0518.png"; //替换的图片
img.onerror=null; //控制不要一直触发错误
}
</script>
---------------------
作者:sforiz
来源:优快云
原文:https://blog.youkuaiyun.com/sforiz/article/details/82682287
版权声明:本文为博主原创文章,转载请附上博文链接!

转载于:https://www.cnblogs.com/liuliang389897172/p/10613919.html

<think>好的,我现在需要帮用户解决微信小程序中node_modules被打入主包的问题,并优化分包策略。首先,我得回想一下用户提到的引用内容,看看有哪些已有的信息可以利用。 用户提供的引用中,引用1提到了分包后需要注意路径问题,以及miniprogram_npm和node_modules的区别。引用2讨论了在uniapp中开启分包优化,设置optimization.subPackages为true。引用3则涉及配置project.config.json中的packNpmRelationList,指定node_modules的构建位置。 用户的问题是如何避免node_modules被打入主包。通常,微信小程序的主包大小有限制,如果node_modules被默认打包进去,可能导致主包超出体积限制。根据微信小程序的官方文档,node_modules的处理可以通过配置miniprogramNpmDistDir来指定构建目录,可能还需要使用分包策略将依赖分散到子包中。 首先,需要明确node_modules是否必须放在主包。如果某些依赖在子包中使用,是否可以将它们构建到子包目录下,而是主包。引用3提到的packNpmRelationList可能与此相关,需要正确配置packageJsonPath和miniprogramNpmDistDir,确保npm构建输出到子包目录。 其次,分包策略方面,可能需要将使用到这些依赖的页面和组件划分到子包中,并在子包中引入对应的npm模块。这样,依赖会被打包到对应的子包中,而是主包。引用1和引用2中的优化选项可能也需要开启,比如设置optimization.subPackages为true,以启用分包优化。 另外,检查是否所有依赖都是必要的。有时候可能安装了未使用的依赖,或者可以按需引入,减少体积。例如,使用vant-weapp这样的UI库时,可以只构建需要的组件,而是整个库,这也能减少主包体积。 还需要考虑构建配置是否正确。比如,是否在project.config.json中正确设置了miniprogram_npm的路径,以及是否执行了npm构建命令,确保依赖被正确构建到指定目录。如果配置错误,可能导致node_modules的内容仍然被打包到主包。 可能还需要使用微信开发者工具的分析功能,查看主包的构成,确认哪些文件占用了空间,特别是node_modules中的哪些模块被包含进去。根据分析结果,调整分包策略和构建配置。 总结下来,解决方案可能包括以下几个步骤: 1. 正确配置project.config.json中的npm构建路径,将node_modules输出到子包目录。 2. 使用分包策略,将依赖模块划分到对应的子包中。 3. 开启分包优化选项,如optimization.subPackages。 4. 按需引入依赖,减少必要的模块。 5. 分析主包构成,优化依赖使用。 接下来,需要将这些步骤具体化,给出用户可操作的方案,并确保符合微信小程序的配置要求。同时,要注意路径问题,确保子包中的页面和组件能正确引用构建后的npm模块。</think>根据微信小程序分包机制和npm模块管理特点,可通过以下方案解决node_modules打包进主包的问题: ### 一、核心优化方案 1. **构建路径配置** 在`project.config.json`中指定npm构建输出目录到分包: ```json "setting": { "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./subpackageA/" // 指定到分包目录 } ] } ``` 该配置会将npm模块构建到子包目录而非主包[^3] 2. **分包策略优化** ```json "subpackages": [ { "root": "subpackageA", "pages": ["pages/moduleA"], "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxidxxx" } } } ] ``` 将node_modules关联的业务模块集中到特定分包[^1] ### 二、进阶优化技巧 1. **开启分包优化模式** 在`manifest.json`中激活资源优化: ```json "mp-weixin": { "optimization": { "subPackages": true // 启用分包体积自动优化 } } ``` 该模式会自动分离公共依赖[^2] 2. **按需加载策略** 对于vant-weapp等UI库,使用`babel-plugin-import`实现按需引入: ```javascript // babel.config.js plugins: [ ['import', { libraryName: 'vant-weapp', libraryDirectory: 'es', style: true }, 'vant-weapp'] ] ``` ### 三、验证与调试 1. **体积分析** 使用开发者工具「代码依赖分析」功能: $$ 主包体积 \leq 2MB $$ $$ 单个分包体积 \leq 2MB $$ $$ 总包体积 \leq 20MB $$ 2. **路径检查清单** - 图片资源使用绝对路径:`/subpackageA/images/icon.png` - 模板引用路径:`/subpackageA/components/my-component` - npm组件引用:`requirePlugin('myPlugin')` ### 四、注意事项 1. 主包应保留: - app.js/app.json/app.wxss - 公共基础库 - 分包公共组件 2. 避免跨分包require 3. 定期执行`npm run build`更新依赖
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值