不要懷疑uniapp的image標籤是支持本地路徑的(圖片緩存組件)。

明明記得前一天還能顯示圖片，可是這天死活不顯示了。絕對路徑，相對路徑都試過，用錯誤路徑能觸發@error，但是用正確路徑就是不報錯，不顯示圖片。然後就懷疑image只支持網絡路徑和應用/static/路徑，搜索uniapp問答社區，官方也有人這麼說。我就開始懷疑人生了。搞到半夜1點，還是不顯示圖片。睡了，第二天早上突發奇想，是不是圖片大小設置有問題？因爲設置成了，style="width:100%;height:auto;" mode="widthFix"。改成style="width:300px;height:300px" mode="widthFix"，果真圖片出來。頓時一萬頭草泥馬呼嘯而過。。。。。

<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>

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
}