Feat：支持配置当节点图片加载失败时显示的默认图片

simple-mind-map/src/constants/defaultOptions.js

@@ -236,5 +236,7 @@ export const defaultOpt = {
     NOT_ACTIVE  : 不激活新创建的节点
     ACTIVE_ONLY  : 只激活新创建的节点，不进入编辑模式
   */
-  createNewNodeBehavior: CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.DEFAULT
+  createNewNodeBehavior: CONSTANTS.CREATE_NEW_NODE_BEHAVIOR.DEFAULT,
+  // 当节点图片加载失败时显示的默认图片
+  defaultNodeImage: ''
 }

simple-mind-map/src/core/render/node/nodeCreateContents.js

@@ -6,18 +6,35 @@ import {
   checkIsRichText,
   isUndef
 } from '../../../utils'
-import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
+import {
+  Image as SVGImage,
+  SVG,
+  A,
+  G,
+  Rect,
+  Text,
+  ForeignObject
+} from '@svgdotjs/svg.js'
 import iconsSvg from '../../../svg/icons'
 import { CONSTANTS, commonCaches } from '../../../constants/constant'
 
 //  创建图片节点
 function createImgNode() {
-  let img = this.getData('image')
+  const img = this.getData('image')
   if (!img) {
     return
   }
-  let imgSize = this.getImgShowSize()
-  let node = new Image().load(img).size(...imgSize)
+  const imgSize = this.getImgShowSize()
+  const node = new SVGImage().load(img).size(...imgSize)
+  // 如果指定了加载失败显示的图片，那么加载一下图片检测是否失败
+  const { defaultNodeImage } = this.mindMap.opt
+  if (defaultNodeImage) {
+    const imgEl = new Image()
+    imgEl.onerror = () => {
+      node.load(defaultNodeImage)
+    }
+    imgEl.src = img
+  }
   if (this.getData('imageTitle')) {
     node.attr('title', this.getData('imageTitle'))
   }
@@ -71,7 +88,7 @@ function createIconNode() {
       node = SVG(src)
     } else {
       // 图片图标
-      node = new Image().load(src)
+      node = new SVGImage().load(src)
     }
     node.size(iconSize, iconSize)
     node.on('click', e => {

web/src/assets/img/图片加载失败.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1702344017086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1621" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M776 328m-72 0a72 72 0 1 0 144 0 72 72 0 1 0-144 0Z" p-id="1622" fill="#bfbfbf"></path><path d="M999.904 116.608a32 32 0 0 0-21.952-10.912l-456.192-31.904a31.552 31.552 0 0 0-27.2 11.904l-92.192 114.848a32 32 0 0 0 0.672 40.896l146.144 169.952-147.456 194.656 36.48-173.376a32 32 0 0 0-11.136-31.424L235.616 245.504l79.616-125.696a32 32 0 0 0-29.28-49.024l-240.192 16.768a32 32 0 0 0-29.696 34.176l55.808 798.016a32.064 32.064 0 0 0 34.304 29.696l176.512-13.184c17.632-1.312 30.848-16.672 29.504-34.272s-16.576-31.04-34.304-29.536l-144.448 10.784-6.432-92.512 125.312-12.576a32 32 0 0 0 28.672-35.04 32.16 32.16 0 0 0-35.04-28.672l-123.392 12.416L82.144 149.184l145.152-10.144-60.96 96.224a32 32 0 0 0 6.848 41.952l198.4 161.344-58.752 279.296a30.912 30.912 0 0 0 0.736 14.752 31.68 31.68 0 0 0 1.408 11.04l51.52 154.56a31.968 31.968 0 0 0 27.456 21.76l523.104 47.552a32.064 32.064 0 0 0 34.848-29.632L1007.68 139.84a32.064 32.064 0 0 0-7.776-23.232z m-98.912 630.848l-412.576-39.648a31.52 31.52 0 0 0-34.912 28.768 32 32 0 0 0 28.8 34.912l414.24 39.808-6.272 89.536-469.728-42.72-39.584-118.72 234.816-310.016a31.936 31.936 0 0 0-1.248-40.192L468.896 219.84l65.088-81.056 407.584 28.48-40.576 580.192z" p-id="1623" fill="#bfbfbf"></path></svg>

web/src/pages/Edit/components/Edit.vue

@@ -308,6 +308,7 @@ export default {
         customInnerElsAppendTo: null,
         enableAutoEnterTextEditWhenKeydown: true,
         customHandleClipboardText: handleClipboardText,
+        defaultNodeImage: require('../../../assets/img/图片加载失败.svg'),
         handleIsSplitByWrapOnPasteCreateNewNode: () => {
           return this.$confirm(
             this.$t('edit.splitByWrap'),