<template>
<view>
<text class="title">{{title}}</text>
<image class="image-dom" :src="networkPreviewUrl" mode="aspectFill"></image>
<button type="default" @click="downloadImage">下载</button>
<image class="image-dom" :src="temporaryPreviewUrl" mode="aspectFill"></image>
<button type="default" @click="saveImage">保存</button>
<image class="image-dom" :src="previewUrl" mode="aspectFill"></image>
{{nodesStr}}
<rich-text :nodes="nodesStr" mode="web"></rich-text>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
networkPreviewUrl: 'https://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qop009177v1tgf14db15he1iaj1is.jpg',
temporaryPreviewUrl: '',
previewUrl: '',
nodesStr: '<p>---</p>'
}
},
onLoad() {
},
methods: {
// 下载
downloadImage(){
uni.downloadFile({
url: this.networkPreviewUrl,
filePath: '/CacheFilePath/',
timeout: 0,
success(res) {
this.temporaryPreviewUrl = res.tempFilePath
console.log('下载:', res.tempFilePath)
}
})
},
// 保存
saveImage(){
const fs = uni.getFileSystemManager()
fs.saveFile({
tempFilePath: this.temporaryPreviewUrl,
success(res) {
this.previewUrl = res.savedFilePath
this.nodesStr = `<p>发斯蒂芬</p><img src="${this.previewUrl}" alt="" /><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/cloud@2x.jpg" width="20" height="20"/>`
console.log('保存:', res.savedFilePath)
}
})
}
}
} </script>
<style>
.logo {
height: 100px;
width: 100px;
margin: 100px auto 25px auto;
}
.title {
font-size: 18px;
color: #8f8f94;
text-align: center;
}
.image-dom {
width: 300rpx;
height: 300rpx;
} </style>
杨婆婆管家家 (作者)
由于业务需要,要保证在没有网络的情况下保证页面的初始显示要正常,只能使用本地缓存的数据,没法使用网络地址
2025-07-14 16:34
DCloud_uniCloud_JSON
回复 杨婆婆管家家: 试过再将图片转 base64 使用吗
2025-07-15 15:55