微信小程序使用自定义组件覆盖原生image组件

最新推荐文章于 2025-03-29 21:03:47 发布

原创

最新推荐文章于 2025-03-29 21:03:47 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #js

本文档介绍了如何使用自定义组件my-image覆盖微信小程序原生的image组件，以解决图片加载失败后缓存导致不显示的问题。通过在自定义组件中处理加载错误，设置样式隔离和虚拟主机，以及将自定义组件标签名设为image，实现了全局替换，简化了大量页面的修改工作。同时，补充了对src为空情况的优化处理。

使用自定义组件覆盖原生image组件

问题的产生

在微信小程序中使用image组件显示图片，但是在使用过程中发现，有时候图片会因为各种原因导致加载失败而不显示；
在某些特殊情况下（暂未知原因，错误代码是404，但图片地址确实能访问），图片加载失败而不显示后，微信会有缓存，即使下次重新打开，因为是同样的地址，所以还是不显示；
而如果更换了地址，则又能正常显示；
虽然image组件提供了 binderror 事件可以对加载失败进行处理，但是如果每个页面，每个标签都去加上处理事件，那是很麻烦的事情；

解决过程

第一阶段：

写一个自定义组件 my-image，在该自定义组件中对加载错误进行处理（url加随机数重新加载）；

my-image.wxml

<image src="{
      
      {src}}" mode="{
      
      {mode}}" webp="{
      
      {webp}}" lazy-load="{
      
      {lazyLoad}}" show-menu-by-longpress="{
      
      {showMenuByLongpress}}" binderror="onError" bindload="onLoaded" class="{
      
      {cssClass}}" style="{
        
        {
        
        cssText}}"></image>

my-image.js

Component({
     
     
  /**
   * 组件的属性列表
   */
  properties: {
     
     
    src: {
     
     
      type: String,
      value: '',
    },
    cssClass: {
     
     
      type: String,
      value: ''
    },
    cssText: {
     
     
      type: String,
      value: ''
    },
    mode: {
     
     
      type: String,
      value: 'scaleToFill'
    },
    webp: {
     
     
      type: Boolean,
      value: false,
    },
    lazyLoad: {
     
     
      type: Boolean,
      value: false,
    },
    showMenuByLongpress: {
     
     
      type: Boolean,
      value: false,
    },
    retry: {
     
     
      type: Number,
      value: 1
    },
    errorImage: {
     
     
      type: String,
      value: 'error.png'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
     
     
    loadCount