vue3的zrender怎么引用png图

要在Vue3中使用ZRender引用PNG图片，可以使用ZRender提供的`ImageShape`对象，该对象可以加载图片并将其绘制到画布上。

以下是一个基本的Vue3组件示例，演示如何使用ZRender加载并绘制PNG图片：

<template>
  <div ref="canvas"></div>
</template>

<script>
import * as zrender from 'zrender'

export default {
  mounted() {
    const canvas = this.$refs.canvas

    // 初始化zrender画布
    const zr = zrender.init(canvas)

    // 创建ImageShape对象
    const image = new zrender.ImageShape({
      style: {
        image: 'path/to/image.png',
        x: 0,
        y: 0,
        width: 100,
        height: 100
      }
    })

    // 将ImageShape对象添加到zrender画布中
    zr.add(image)

    // 渲染画布
    zr.render()
  }
}
</script>

在上面的示例中，我们首先初始化了一个zrender画布，并创建了一个`ImageShape`对象，然后将其添加到画布中并渲染出来。在创建`ImageShape`对象时，我们需要指定`style`属性，其中`image`属性是PNG图片的路径，`x`和`y`属性是图片的坐标，`width`和`height`属性是图片的宽度和高度。

请注意，如果PNG图片位于与Vue组件不同的域中，则需要在服务器端启用CORS（跨域资源共享）以允许加载PNG图片。