uni.canvasToTempFilePath导出的地址赋值到image的src中为啥不显示图片，h5和app都不显示

<template>  
    <view>  
        <view><canvas id="myCanvas" canvas-id="myCanvas" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"></canvas></view>  
        <view><image :src="photo"></image></view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            windowWidth: '',  
            windowHeight: '',  
            photo: ''  
        };  
    },  
    onLoad() {  
        let res = getApp().globalData.systemInfo;  
        this.windowWidth = res.windowWidth ;  
        this.windowHeight = (res.windowHeight - 80) / 5;  
    },  
    onReady() {  
        this.testCtx();  
    },  
    methods: {  
        testCtx() {  
            const ctx = uni.createCanvasContext('myCanvas', this);  
            ctx.moveTo(10, 10);  
            ctx.rect(10, 10, 100, 50);  
            ctx.lineTo(110, 60);  
            ctx.stroke();  
            ctx.draw();  

            uni.canvasToTempFilePath({  
                canvasId: 'myCanvas',  
                success: function(res) {  
                    // this.photo = res.tempFilePath;  
                    this.photo = 'file://' + res.tempFilePath;  
                    console.log(this.photo);  
                }  
            });  
        }  
    }  
};  
</script>  

<style>  
image {  
    background-color: gray;  
    width: 400px;  
    height: 500px;  
}  
</style>