前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >不要怀疑uniapp的image标签是支持本地路径的(图片缓存组件)。

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

作者头像
xiny120
发布2023-03-16 21:09:45
1.9K0
发布2023-03-16 21:09:45
举报
文章被收录于专栏:毛毛v5

明明记得前一天还能显示图片,可是这天死活不显示了。绝对路径,相对路径都试过,用错误路径能触发@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
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档