流云决

发布：2020-10-10 12:35
更新：2020-10-15 18:03
阅读：3363

【报Bug】APP缓存阿里云图片以背景图方式展示异常

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型： Alpha

HBuilderX版本号： 2.9.1

手机系统： Android

手机系统版本号： Android 10

手机厂商： OPPO

手机机型： realme

页面类型： vue

打包方式：云端

项目创建方式： HBuilderX

示例代码：

    <!-- 缓存正常 -->  
    <image :src="smImg(testImg)" style="margin-top: 200rpx;"></image>  
</view>

</template>

                        } else {  
                            return Promise.reject('下载临时文件失败')  
                        }  
                    }).catch(info => {  
                        console.log(info);  
                    })  
                }, 2000)  
            return real_img  
            }  

        }  
    }  
}

</script>

<style>

</style>

操作步骤：

新建页面复制上面代码

预期结果：

显示正常

实际结果：

图片不显示

bug描述：

APP缓存阿里云图片以背景图方式展示异常，image方式却正常，下面提供复现页面代码，在app里运行就行

2020-10-10 12:35 负责人:DCloud_UNI_GSQ 分享

3 个回复

DCloud_UNI_GSQ

HBuilderX 2.9.3 已修复

原因：上一个版本调整了保存文件的文件名规则导致

另外建议加上引号：<view :style="{ 'background-image': 'url(\'' + smImg(testImg) + '\')' }" style="width: 100%;height: 500rpx;" ></view>

流云决 (作者)

好的，收到

2020-10-17 19:10
流云决 (作者)

带引号的写法微信小程序会报错

2020-11-15 11:48
DCloud_UNI_GSQ

回复流云决: 先放到js里

2020-12-03 16:39
DCloud_UNI_GSQ

回复流云决: 先放到js里拼接字符串

2020-12-03 16:40

流云决 (作者)

<template>  
    <view>  
        <!-- 首次显示，第二次打开页面（也就是读缓存）不显示 -->  
        <view   :style="{ 'background-image': 'url(' + smImg(testImg) + ')' }" style="width: 100%;height: 500rpx;" ></view>  

        <!-- 缓存正常 -->  
        <image :src="smImg(testImg)" style="margin-top: 200rpx;"></image>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                'testImg':'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-model/9c7c3add-9986-4e71-8352-06a9fdd6b540.png'  
            }  
        },  
        methods: {  
            smImg(url){  
                let real_img=url+'?x-oss-process=image/resize,l_200'  
                const cached = uni.getStorageSync(real_img)  
                if (cached) {  
                    console.log(url + "已缓存为：" + cached)  
                    return cached  
                } else {  
                    console.log("未缓存,延迟下载")  
                    setTimeout(() => {  
                        uni.downloadFile({  
                            url: url  
                        }).then(res => {  
                            if (res[1].statusCode == 200) {  
                                uni.saveFile({  
                                    tempFilePath: res[1].tempFilePath,  
                                    success: function(res) {  
                                        console.log('下载完成：' + res.savedFilePath);  
                                        uni.setStorageSync(real_img, res.savedFilePath)  
                                    }  
                                });  

                            } else {  
                                return Promise.reject('下载临时文件失败')  
                            }  
                        }).catch(info => {  
                            console.log(info);  
                        })  
                    }, 2000)  
                return real_img  
                }  

            }  
        }  
    }  
</script>  

<style>  

</style>

DCloud_uniCloud_WYQ

Bug已确认，感谢反馈

该问题目前已经被锁定, 无法添加新回复

【报Bug】APP缓存阿里云图片以背景图方式展示异常

操作步骤：

新建页面复制上面代码

预期结果：

显示正常

实际结果：

图片不显示

bug描述：

3 个回复

公告

相关问题

【报Bug】APP缓存阿里云图片以背景图方式展示异常

操作步骤： 新建页面复制上面代码

预期结果： 显示正常

实际结果： 图片不显示

bug描述：

与内容相关的链接

3 个回复

公告

相关问题

操作步骤：

新建页面复制上面代码

预期结果：

显示正常

实际结果：

图片不显示