不要怀疑uniapp的image标签是支持本地路径的(图片缓存组件)。

明明记得前一天还能显示图片，可是这天死活不显示了。绝对路径，相对路径都试过，用错误路径能触发@error，但是用正确路径就是不报错，不显示图片。然后就怀疑image只支持网络路径和应用/static/路径，搜索uniapp问答社区，官方也有人这么说。我就开始怀疑人生了。搞到半夜1点，还是不显示图片。睡了，第二天早上突发奇想，是不是图片大小设置有问题？因为设置成了，style="width:100%;height:auto;" mode="widthFix"。改成style="width:300px;height:300px" mode="widthFix"，果真图片出来。顿时一万头草泥马呼啸而过。。。。。

代码语言：javascript复制

<template>
    <view class="wrap">
        <image :src="src" :style="{width: width,borderRadius:radius}"  mode="widthFix" @error="imageError"></image>
        <view>{{src}}</view>
    </view> 
</template>

<script>
    import {getImageCache} from './image'
    export default {
        props: {
            info:{
                type:Object,
                default(){
                    return {}
                }
            },
            url: {
                type: String,
                default(){
                    return ''
                }
            },
            fileMd5: {
                type: String,
                default(){
                    return ''
                }
            },
            width: {
                type: String,
                default(){
                    return '';
                }
            },
            height: {
                type: String,
                default(){
                    return '';
                }
            },
            radius: {
                type: String,
                default(){
                    return '';
                }
            }
        },
        data() {
            return {
                    src: '' // 图片地址
            }
        },
        watch: {
            info(val){
                console.log(val);
            },
            // 监听头像md5值的变化
            url(val) { 
                // 查找获取图片缓存
                this.getImageCache()
            }
        },
        created() {
            // 查找获取图片缓存
            this.getImageCache()
        },
        methods: {
            imageError(e,e1){
                console.log(e,e1)
            },
            // 查找获取图片缓存
            async getImageCache() { 
                //console.log('sha?')
                // #ifdef APP-PLUS
                var result = await getImageCache(this.url, this.fileMd5)
                console.log("image cache",this.info,result);
                if (result) {
                    this.src = result
                } else {
                    this.src = this.url
                }
                // #endif
                // #ifndef APP-PLUS
                this.src = this.url
                // #endif
            },
        }
    }
</script>

<style scoped lang="scss">
    .wrap {
    }
</style>

代码语言：javascript复制

import { Base64 } from 'js-base64';
export function getImageCache(filePath,fileMd51) {
    //console.log('caoxx')
    // #ifdef APP-PLUS
    return new Promise((resolve, reject) => {
        //console.log(filePath);
        let fileMd5 = "";
        try{
            fileMd5 = Base64.encode(filePath);
            //console.log(fileMd5);
        }catch(e){
            fileMd5 = filePath;
        }

        // 图片缓存key值
        let storageKey = 'IMAGE_CACHE_INFO_'   fileMd5
        // 首先获取本地存储的数据，查询是否有对应文件路径，如果有缓存内容，直接返回
        const cacheFileInfo = uni.getStorageSync(storageKey)
        if (cacheFileInfo) {
            //console.log("已缓存为："   cacheFileInfo)
            resolve(cacheFileInfo)
            return;
            //return cacheFileInfo
        } else {
            //console.log("未缓存,进行下载保存")
            // 如果没有，执行下载，并存储起来后
            uni.downloadFile({
                url: filePath,
                success: (res) => {
                    if (res.statusCode === 200) {
                        //console.log('下载成功',filePath,res);
                        // 再进行本地保存

                        uni.saveFile({
                            tempFilePath: res.tempFilePath,
                            success: function(res2) {
                                //console.log(res2)
                                var t0 = plus.io.convertLocalFileSystemURL(res2.savedFilePath);
                                var t0 = res2.savedFilePath // plus.io.convertLocalFileSystemURL(res2.savedFilePath);
                                //var t0 =  'file://'  plus.io.convertLocalFileSystemURL(res2.savedFilePath);
                                //console.log(t0);
                                //t0 = plus.io.convertAbsoluteFileSystem(res2.savedFilePath);
                                //console.log(t0);
                                //t0 = t0   "test"
                                uni.setStorageSync(storageKey, t0)
                                resolve(t0)
                                //return res2.savedFilePath
                                return;
                            },
                            fail: function(res2) {
                                resolve(filePath);
                                //return filePath
                                return;
                            }
                        })
    
                    } else {
                        console.log('下载临时文件失败')
                        resolve(filePath);
                        //return filePath
                        return;
                    }
                },
                fail: (res) => {
                    console.log(res)
                    resolve(filePath);
                    //return filePath
                    return;
                }
            })
        }
    })
    // #endif
    // #ifndef APP-PLUS
    return new Promise((resolve, reject) => {
        //reject({
        //  message: '请在App中使用'
        //})
        resolve(filePath);
    })
    // #endif
}

error height image static width

0 人点赞