更新记录

1.0.4（2023-09-13） 下载此版本

优化调用示例代码

1.0.3（2023-08-30） 下载此版本

优化图标，替换成 uni-icon

1.0.2（2023-08-30） 下载此版本

更新默认宽度和高度，只需要传入基础路径即可。

平台兼容性

uni-app

其他

hxe-image-video适用于uni-app项目的图片展示组件

本组件目前兼容微信小程序、H5

简单好用的图片显示组件，基于uni-image的二次开发，将图片和视频的展示二合一，支持自动区分是图片还是视频，传入对应的 Url 即可。

--- 扫码、关注我们 ---

扫码关注公众号，有问题可随时沟通！

使用方式

<hxe-image-video v-for="(item, index) in imgList" :key="index" :src="item" @click="imgPreview(index, imgList)"></hxe-image-video>

export default {
    data() {
        return {
            imgList: ['https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg', 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png']
        };
    },
    methods: {
        /**
         * 图片预览
         */
        imgPreview(index, list) {
            const urlList = []
            list.forEach(item => {
                if (this.checkFile(item, 'image')) {
                    urlList.push(item)
                }
            })
            uni.previewImage({
                current: index,
                loop:true,
                urls: urlList
            })
        },
        /**
         * 判断文件类型，判断传入的路径是图片还是视频
         * @param {*} fileValue 文件名称
         * @param {*} type 文件类型 video Or image
         */
        checkFile(fileValue, type) {
            var index = fileValue.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
            var fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀
            if(type == 'video') {
                if (!/(.*)\.(mp4|rmvb|avi|ts)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合视频格式
                    return false;
                }
            }
            if(type == 'image') {
                if (!/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG|image)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合图片格式
                    return false;
                }
            }
            return true;
        },
    }
}

属性说明