1、填充背景色的时候,开始不显示背景图片,只显示背景颜色。
2、开始是放在assets/images目录下:
const graph = new Graph({
container: document.getElementById("container") as HTMLElement,
width: widthPx,
height: heightPx,
background: {
color: "#F2F7FA",
position: {
x: 0,
y: 0,
},
size: {
width: widthPx,
height: heightPx,
},
image:
"../assets/images/bg.jpg", // 设置背景图片
},
});
然后我们可以发现,并没有显示出来,只有背景颜色。
3、要显示的效果图如下 :
4、解决不显示图片的问题:将图片的相对路径改为url就可以了,http开头的。
const graph = new Graph({
container: document.getElementById("container") as HTMLElement,
width: widthPx,
height: heightPx,
background: {
color: "#F2F7FA",
position: {
x: 0,
y: 0,
},
size: {
width: widthPx,
height: heightPx,
},
image:
"https://img.zcool.cn/community/038d08b56dfd4846ac72531cb42cdff.jpg", // 设置背景图片
},
});
5、也可以用函数的形式:
graph.drawBackground({
color: '#000',
position:{
x: 0,
y: 0,
},
size: {
width: widthPx,
height: heightPx,
},
image: 'https://img.zcool.cn/community/038d08b56dfd4846ac72531cb42cdff.jpg', // 设置背景图片
})
同样都可以达到相同的效果。