更新记录

1.0.0（2025-10-14） 下载此版本

1.0.0 支持显示图片加载中，加载失败，点击图片显示原图功能

平台兼容性

uni-app(4.76)

目录

放入components 目录中即可，页面中直接使用不需要单独引入

使用实例

<template>
    <view class="content">
          <m-images
                            :url="`https://image.baidu.com/search/detail?adpicid=0&b_applid=10634324363221728087&bdtype=0&commodity=&copyright=&cs=***%2C2939516195&di=7552572858984038401&fr=click-pic&fromurl=http%253A%252F%252Fm.dianping.com%252Fugcdetail%252F268346951%253FsceneType%253D0%2526bizType%253D29%2526msource%253Dbaiduappugc&gsm=1e&hd=&height=0&hot=&ic=&ie=utf-8&imgformat=&imgratio=&imgspn=0&is=***%2C974450124&isImgSet=&latest=&lid=e59c2da802384d9c&lm=&objurl=https%253A%252F%252Fqcloud.dpfile.com%252Fpc%252F46Q5sy4JjFJcyUTArTrytnNHkEP-f_INxQRdV41wx6qjDUMl9-x-W3-mDHL5mMtD.jpg&os=***%2C974450124&pd=image_content&pi=0&pn=3&rn=1&simid=***%2C753457954&tn=baiduimagedetail&width=0&word=%E5%88%98%E4%BA%A6%E8%8F%B2&z=`"
                            widht="44rpx"
                            height="44rpx"
                          ></m-images>
        <!-- <image class="logo" src="/static/logo.png"></image> -->

    </view>
</template>

<script lang="ts" setup>

import { ref } from 'vue';

</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

参数说明

type ModeType = 
  | 'scaleToFill'
  | 'aspectFit'
  | 'aspectFill'
  | 'heightFix'
  | 'widthFix'
  | 'top'
  | 'bottom'
  | 'center'
  | 'left'
  | 'right'
  | 'top left'
  | 'top right'
  | 'bottom left'
  | 'bottom right'

 // 图片链接
  url: {
    type: String,
    required: true
  },
  // 图片裁剪、缩放模式
  mode: {
    type: String as PropType<ModeType>,
    default: 'scaleToFill'
  },
  // 宽度
  width: {
    type: [String, Number],
    default: '100%'
  },
  // 高度
  height: {
    type: [String, Number],
    default: '100%'
  },
  // loading图片大小
  loadingSize: {
    type: [String, Number],
    default: '60rpx'
  },
  // 圆角 角度
  rounded:{
      type: [Number,String],
      default: 0
  },
  // 是否开启点击后查看大图
  showLarge:{
      type:Boolean,
      default:false
  },
  // 查看大图的数组
  currImage:{
      type: Array,
      default: ()=>[]
  }

  const emit = defineEmits(['load', 'error'])
  图片加载成功和失败的回调