Image+text in a flowchart node do not display inline

[martinSDT]

Hello all !

Description

When an image followed directly by a text is placed in a flowchart node, the renderer displays first the image and then the text in a new line.
I can add additional line break using "\n" but cannot find a way to display image+text inline.

Steps to reproduce

You can play with the code samplein the Mermaid Live Editor to see that image and text are displayed but not inline.
Moreover, the image width seems enforced by the text length, even if the image width property is given.

Screenshots

Code Sample

flowchart TD
    A[<img src='https://iconscout.com/ms-icon-310x310.png'/>a]
    B[<img src='https://iconscout.com/ms-icon-310x310.png'/>ab]
    C[<img src='https://iconscout.com/ms-icon-310x310.png'/>\nabc]
    subgraph D[<img src='https://iconscout.com/ms-icon-310x310.png'/>sub]
     E[<img src='https://iconscout.com/ms-icon-310x310.png' width='16'/>abcd]
     F[<img src='https://iconscout.com/ms-icon-310x310.png' width='32'/>abcd]
    end

Setup

• Mermaid version: 10.5.0
• Browser and Version: Chrome 118.0.5993.72

Suggested Solutions

The objective is here to use the image as an icon. It is close to what is proposed by the syntax "fa:fa-car" that links with fontawesome, but I would like to be ble to use local images instead.

Any help would be really appreciated, thanks in advance !

[X-Raym]

I confirm, this is because it's rendered with flex, width 100, and mostly, divs

A way to be able to render inline would be nice. We can't use post CSS on this cause it would need to readjust rect height, and all node positions below.

this:

    A("<div><img src='https://www.extremraym.com/cloud/reascript-doc/images/reaper_shield.svg'></div>REAPER<br>MIDI Data<br>14 bits")

render into this:

<div><img src="https://www.extremraym.com/cloud/reascript-doc/images/reaper_shield.svg" style="display: flex; flex-direction: column; width: 100%;"></div>

In context:

<g class="node default flowchart-label" id="flowchart-D-3" transform="translate(237.5625, 1053.3999938964844)">
  <rect class="basic label-container" style="" rx="5" ry="5" x="-135.5" y="-147" width="271" height="294"></rect>
  <g class="label" style="" transform="translate(-128, -139.5)">
    <rect></rect>
    <foreignObject height="279" width="256">
      <div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml">
        <span class="nodeLabel">
          <div><img src="https://www.extremraym.com/cloud/reascript-doc/images/reaper_shield.svg" style="display: flex; flex-direction: column; width: 100%;"></div>
          Chataigne
        </span>
      </div>
    </foreignObject>
  </g>
</g>