小程序image 网络http 协议不显示方法(已验证)
你会发现地址正确 但是没法显示。
if (filePath.length < 10) {
filePath = "../../static/logo.png"
}
console.log("地址:" + filePath)
let that = this
const firstCanvas = uni.createCanvasContext('firstCanvas', this);
let scla = 1
uni.getImageInfo({
src: filePath,
success(res) {
that.canvasWidth = res.width * scla
that.canvasHeight = res.height * scla
console.log(res, that.canvasWidth, that.canvasHeight, filePath)
firstCanvas.drawImage(filePath, 0, 0, that.canvasWidth, that.canvasHeight);
firstCanvas.draw();
// that.$nextTick(() => { //获取画布像素数据
})
},
fail(res) {
console.log("失败img---:" + res + " url:" + filePath)
}
所以有个方法 先下载到本地。然后重置一下。
renderFinish() {
if (this.list.id) {
this.$api.shebeiDetail({
id: this.list.id
}).then(res => {
if (res.code == 1) {
this.list.xinghao = res.data.xinghao
const downloadTask = uni.downloadFile({
url: res.data.image,
success: (res) => {
if (res.statusCode === 200) {
this.list.image = res.tempFilePath;
console.log("本地地址" + this.list.image);
}
}
});
downloadTask.onProgressUpdate((res) => {
console.log('下载进度' + res.progress);
console.log('已经下载的数据长度' + res.totalBytesWritten);
console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
});
} else {
uni.showToast({
title: ' 错误:没找到这个设备 ',
icon: "none"
});
return false;
}
})
}
let filePath = encodeURI(this.list.image)
if (filePath.length < 10) {
filePath = "../../static/logo.png"
}
console.log("地址:" + filePath)
let that = this
const firstCanvas = uni.createCanvasContext('firstCanvas', this);
let scla = 1
uni.getImageInfo({
src: filePath,
success(res) {
that.canvasWidth = res.width * scla
that.canvasHeight = res.height * scla
console.log(res, that.canvasWidth, that.canvasHeight, filePath)
firstCanvas.drawImage(filePath, 0, 0, that.canvasWidth, that.canvasHeight);
firstCanvas.draw();
// that.$nextTick(() => { //获取画布像素数据
})
},
fail(res) {
console.log("失败img---:" + res + " url:" + filePath)
}
})