diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js
index 85a32670..3f35c21e 100644
--- a/src/editor/components/seColorPicker.js
+++ b/src/editor/components/seColorPicker.js
@@ -666,15 +666,20 @@ export class SeColorPicker extends HTMLElement {
     this.i18next = null;
     this.$picker = this._shadowRoot.getElementById('picker');
     this.$color_picker = this._shadowRoot.getElementById('color_picker');
+    this.editor = null;
   }
   /**
    * @function init
    * @param {any} name
    * @returns {void}
    */
-  init (i18next) {
+  init (i18next, editor) {
     this.i18next = i18next;
     this.setAttribute('config-change_xxx_color', t('config.change_xxx_color'));
+    this.editor = editor;
+    if (this.hasAttribute("src")) {
+      this.setAttribute('src', this.getAttribute("src"));
+    }
   }
   /**
    * @function observedAttributes
@@ -691,10 +696,13 @@ export class SeColorPicker extends HTMLElement {
    * @returns {void}
    */
   attributeChangedCallback (name, oldValue, newValue) {
-    if (oldValue === newValue) return;
+    if (oldValue === newValue && name !== 'src') return;
     switch (name) {
     case 'src':
-      this.$logo.setAttribute('src', './images/' + newValue);
+      if(this.editor !== null) {
+        const { imgPath } = this.editor.configObj.curConfig;
+        this.$logo.setAttribute('src', imgPath + '/' + newValue);
+      }
       break;
     case 'label':
       this.setAttribute('title', t(newValue));
diff --git a/src/editor/panels/BottomPanel.js b/src/editor/panels/BottomPanel.js
index 3627680b..d44ad638 100644
--- a/src/editor/panels/BottomPanel.js
+++ b/src/editor/panels/BottomPanel.js
@@ -182,8 +182,7 @@ class BottomPanel {
           <div value="content">${i18next.t('tools.fit_to_all')}</div>
         </se-zoom>
         <se-colorpicker id="fill_color" src="fill.svg" label="properties.fill_color" type="fill"></se-colorpicker>
-        <se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke">
-        </se-colorpicker>
+        <se-colorpicker id="stroke_color" src="stroke.svg" label="properties.stroke_color" type="stroke"></se-colorpicker>
         <se-spin-input id="stroke_width" min=0 max=99 step=1 title="properties.stroke_width" label=""></se-spin-input>
         <se-select id="stroke_style" title="${i18next.t('properties.stroke_style')}" label="" width="22px" height="22px"
           options="&#8212;,...,- -,- .,- .."
@@ -217,8 +216,8 @@ class BottomPanel {
     $id('stroke_linejoin').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linejoin', evt));
     $id('stroke_linecap').addEventListener('change', (evt) => this.handleStrokeAttr.bind(this)('stroke-linecap', evt));
     $id('opacity').addEventListener('change', this.handleOpacity.bind(this));
-    $id('fill_color').init(i18next);
-    $id('stroke_color').init(i18next);
+    $id('fill_color').init(i18next, this.editor);
+    $id('stroke_color').init(i18next, this.editor);
     // eslint-disable-next-line max-len
     [ "linejoin_miter", "linejoin_round", "linejoin_bevel", "linecap_butt", "linecap_square", "linecap_round" ].forEach((attrId) =>
       $id(attrId).init(this.editor)