更新记录

1.0.1（2025-01-23） 下载此版本

优化加载中动画

1.0.0（2025-01-23） 下载此版本

发布初版

平台兼容性

组件名: xt-image

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view>
        <xt-image :src="imageUrl" radius='10rpx' preview></xt-image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imageUrl: 'https://img2.baidu.com/it/u=2957562685,2198634793&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1737565200&t=fe793276ec3656ef227916ec5572c94e'
            }

        },
        methods: {},
    }
</script>

<style lang="scss">

</style>

自定义加载动画

<xt-image :src="imageUrl">
            <template #load>
                加载中...
            </template>
</xt-image>

自定义加载失败内容

    <xt-image :src="imageUrl">
            <template #error>
                加载失败
            </template>
    </xt-image>

xt-image 属性和方法

说明

1. 当开启预览后,点击事件在 Vue3 版本中可能会与预览事件同步触发,建议 点击事件 和 预览 两者只绑定一个