Bpmn在vue中不能使用require 进行导入图片，而是要使用new URL

在vue3项目中引入了bpmn，其原有的图形/形状并不能满足我的需求，所以我对原有的图形进行了自定义，改为了图片，而我在开发过程中发现图片的引入方式有了些许变化，如果使用默认默认的方式也就是直接在url后面指定图片的路径，这样子在bpmn中是渲染不出来的。

解决方式：利用new URL对象，像这样的方式引入图片

 "bpmn:StartEvent": function(parentGfx, element) {
      var attrs = {
        x: 0,
        y: 0,
        width: 160,
        height: 40,
        url: new URL('../../assets/bpnm/start2.png', import.meta.url)
  }
1
2
3
4
5
6
7
8

主要是学习了mdn和张鑫旭对于URL对象的说明

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/URL

mdn

https://www.zhangxinxu.com/wordpress/2019/08/js-url-urlsearchparams/

张鑫旭

语法

new URL(url, base)

参数

url 相对地址或者绝对地址。如果是相对地址则需要base参数，如果是绝对地址会忽略base参数

base 如果是相对地址就需要这个参数，其作用是作为url的基础地址。也可以使用URL对象作为base参数

const img = new URL('../../bpmn/assets/bpnm/start2.png', import.meta.url)
console.log(img.href)
// http://localhost:2801/src/views/service/bpmn/assets/bpnm/start2.png

 
1
2
3
4
5

只有这样：相对地址+base基础地址我们的图片才可以正确显示出来