更新记录

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

初始功能

平台兼容性

uni-app(4.66)

liaction-image

基于uni-app的增强型图片组件，支持自定义加载动画、错误状态处理和更多扩展功能。

功能特点

• 提供错误状态的自定义插槽，可以灵活设置错误提示
• 支持图片加载失败时的重试功能
• 兼容uni-app的所有平台

属性说明

插槽说明

error-icon

用于自定义图片加载失败时显示的图标或内容。

使用示例：

<liaction-image src="/static/test.jpg">
  <template v-slot:error-icon>
    <view class="custom-error">
      <text style="font-size: 24px; color: #f00;">!</text>
    </view>
  </template>
</liaction-image>

使用示例

基本使用

<template>
  <view>
    <!-- 基本使用 -->
    <liaction-image src="https://example.com/image.jpg"></liaction-image>

    <!-- 自定义加载动画样式 -->
    <liaction-image src="https://example.com/image.jpg" :loading="{iconSize: 40, iconColor: '#007aff'}"></liaction-image>

    <!-- 自定义错误图标 -->
    <liaction-image src="https://example.com/nonexistent.jpg">
      <template v-slot:error-icon>
        <view class="my-error-icon">
          <text style="font-size: 40px; color: #f56c6c;">!</text>
        </view>
      </template>
    </liaction-image>

    <!-- 监听错误事件 -->
    <liaction-image src="https://example.com/image.jpg" @error="handleError"></liaction-image>
  </view>
</template>

<script>
export default {
  methods: {
    handleError(e) {
      console.log('图片加载失败', e)
    }
  }
}
</script>

<style>
.my-error-icon {
  width: 40px;
  height: 40px;
  background-color: #f56c6c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
</style>

注意事项

• 请确保图片URL是可访问的，否则会触发错误状态
• 在自定义error-icon插槽时，建议提供足够大且清晰的图标，以确保用户体验
• 组件内部已处理了加载错误的重试逻辑