Javascript Fabric.js：在画布中设置新图像，但画布不更改

我将多个图像添加到画布，但我想更改单击按钮时添加的第一个图像。现在，画布没有更新。我不知道为什么（我在nuxt js中使用fabric）例如：首先，图像将添加到挂载的画布中，然后单击“添加”按钮，第二个图像将添加到画布中（addPattern方法）。之后，我单击“更改”按钮（changeImage）方法，但显示的画布没有更新

我的代码

<template>
    <div>
        <canvas ref="can" width="500" height="500"></canvas>
        <button @click="addPattern">add</button>
        <button @click="changeImage">change</button>
    </div>
</template>
<script>
    let canvas = new fabric.Canvas('c')
    mounted() {
        const ref = this.$refs.can
        canvas = new fabric.Canvas(ref)
        fabric.Image.fromURL('https//www.test.com/test.png', function (productImage) {
            productImage.set({
                width: 500,
                height: 500,
                selectable: false,
                name: 'product',
            })
            canvas.add(productImage)
        })
    },
    method: {
        addPattern() {
            fabric.Image.fromURL(image, function (patternImage) {
                patternImage.set({
                    selectable: true,
                })
                patternImage.scaleToHeight(120)
                patternImage.scaleToWidth(120)
                canvas.add(patternImage)
            })
        }
        changeImage() {
            canvas.item(0).set({
                src: "https//www.test.com/test2.png",
                width: 500,
                height: 500,
                selectable: false,
                name: 'product',
            })
            canvas.renderAll()
        }
    }
</script>

添加
改变
let canvas=new fabric.canvas（'c'）
安装的（）{
const ref=此。$refs.can
画布=新结构。画布（参考）
fabric.Image.fromURL（'https//www.test.com/test.png'，函数（productImage）{
productImage.set({
宽度：500，
身高：500，
可选：false，
名称：'产品'，
})
canvas.add（productImage）
})
},
方法：{
addPattern（）{
fabric.Image.fromURL（图像，函数（模式图像）{
patternImage.set({
是的，
})
patternImage.scaleToHeight（120）
patternImage.scaleToWidth（120）
canvas.add（patternImage）
})
}
changeImage（）{
canvas.item（0）.set({
src:“https//www.test.com/test2.png”，
宽度：500，
身高：500，
可选：false，
名称：'产品'，
})
canvas.renderAll（）
}
}

要更改

src

属性，需要使用

setSrc

方法

canvas.item（0）.set({
宽度：500，
身高：500，
可选：false，
名称：'产品'，
})
.setSrc（“https//www.test.com/test2.png”，（）=>{
canvas.renderAll（）
})

您可能无法通过设置

src

来更改图像。我不知道为什么。我认为你需要添加一个新的图像和删除旧的，它将工作良好