From fc45e2a528ad95e9a1def1023271f19cf4d9e244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Tue, 12 Dec 2023 09:55:33 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=BD=93=E8=8A=82=E7=82=B9=E5=9B=BE=E7=89=87=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E5=A4=B1=E8=B4=A5=E6=97=B6=E6=98=BE=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/constants/defaultOptions.js           |  4 ++-
 .../core/render/node/nodeCreateContents.js    | 27 +++++++++++++++----
 web/src/assets/img/图片加载失败.svg           |  1 +
 web/src/pages/Edit/components/Edit.vue        |  1 +
 4 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 web/src/assets/img/图片加载失败.svg

diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js
index 67c8298e..33711154 100644
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/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: ''
 }
diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js
index 1052ea55..d6528a5f 100644
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/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 => {
diff --git a/web/src/assets/img/图片加载失败.svg b/web/src/assets/img/图片加载失败.svg
new file mode 100644
index 00000000..1b0f7d8a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 20e3805c..f5018434 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/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'),