# Qustion about node-red-contrib-ui-svg - Control via messages - Add elements via msg - Add dynamic image

**URL:** <https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642>\
**Category:** Dashboard\
**Created:** [23 May 2023 14:23 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642 "2023-05-23T14:23:48Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![OrangeRaspberry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/orangeraspberry/32/106946_2.png) [@OrangeRaspberry](https://discourse.nodered.org/u/OrangeRaspberry)\
**Post date:** [23 May 2023 14:23 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/1 "2023-05-23T14:23:48Z")

</div>

I have question about node-red-contrib-ui-svg. Is it possible to add dnamic image through "Control via messages"?  
I have tried below msg but it doesn't work.

```auto
msg = {"payload": {
  "command": "add_element", 
  "elementType": "image",
  "elementId": "pic_1", 
  "elementAttributes": {
      "xlink:href": my image file path,
      "x": "10",
      "y": "10",
      "height": "100",
      "width": "100"
  }
}
};
return msg;

```

---

<div class="post-metadata">

**Author:** ![OrangeRaspberry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/orangeraspberry/32/106946_2.png) [@OrangeRaspberry](https://discourse.nodered.org/u/OrangeRaspberry)\
**Post date:** [23 May 2023 15:08 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/2 "2023-05-23T15:08:17Z")

</div>

I have found the element attribute "xlink:href" is no longer available for chrome.It shall be replaced by  
arrtibute "href". See below msg.

```auto
{
  "command": "add_element", 
  "elementType": "image",
  "elementId": "car_1", 
  "elementAttributes": {
      "href": "/Pic/car.png",
      "x": "10",
      "y": "10",
      "height": "100",
      "width": "100"
  }
}

```

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 May 2023 22:12 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/3 "2023-05-23T22:12:45Z")

</div>

Hi @OrangeRaspberry,  
Does your last flow work? I assume not because it contains a path to a local image file, which a browser cannot access. Suppose all browsers over the globe would be able to access the files on your computer, that would be quite a problem for you 😉

See [this](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Add-an-image-to-an-SVG-drawing) wiki page for more information about this topic.

Bart

---

<div class="post-metadata">

**Author:** ![OrangeRaspberry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/orangeraspberry/32/106946_2.png) [@OrangeRaspberry](https://discourse.nodered.org/u/OrangeRaspberry)\
**Post date:** [23 May 2023 23:19 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/4 "2023-05-23T23:19:35Z")

</div>

Hello @BartButenaers  
Last flow work. The file path is not the cause. I just changed attribute "xlink:href" to "href".

---

<div class="post-metadata">

**Author:** ![OrangeRaspberry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/orangeraspberry/32/106946_2.png) [@OrangeRaspberry](https://discourse.nodered.org/u/OrangeRaspberry)\
**Post date:** [23 May 2023 23:27 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/5 "2023-05-23T23:27:02Z")

</div>

![car1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/61e6ccb078c2e7dec247dc968a68180973c8192e.jpeg)  
 ![car2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/859e0a086c719916678f3a6f71c3de92737fbd8c.jpeg)

---

<div class="post-metadata">

**Author:** ![OrangeRaspberry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/orangeraspberry/32/106946_2.png) [@OrangeRaspberry](https://discourse.nodered.org/u/OrangeRaspberry)\
**Post date:** [23 May 2023 23:36 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/6 "2023-05-23T23:36:44Z")

</div>

I have seen your github. The action " Add an image to an SVG drawing " is on node red IDE page. I just want this feature on node red dashboard. In other words, I want this image is dynamic.

---

<div class="post-metadata">

**Author:** ![OrangeRaspberry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/orangeraspberry/32/106946_2.png) [@OrangeRaspberry](https://discourse.nodered.org/u/OrangeRaspberry)\
**Post date:** [23 May 2023 23:39 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/7 "2023-05-23T23:39:20Z")

</div>

It seems SVG 2 remove attribute "xlink:href". So "href" shall be used instead of "xlink:href".

---

<div class="post-metadata">

**Author:** ![OrangeRaspberry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/orangeraspberry/32/106946_2.png) [@OrangeRaspberry](https://discourse.nodered.org/u/OrangeRaspberry)\
**Post date:** [24 May 2023 05:37 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/8 "2023-05-24T05:37:48Z")

</div>

Awesome node! I like it.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 June 2023 05:38 UTC](https://discourse.nodered.org/t/qustion-about-node-red-contrib-ui-svg-control-via-messages-add-elements-via-msg-add-dynamic-image/78642/9 "2023-06-07T05:38:32Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.