Images are not rendered

[sidharthv96]

Describe the bug

Images aren't rendered.

flowchart LR
  subgraph aws
    aws_db(<img src='https://icons.terrastruct.com/azure/Databases%20Service%20Color/Azure%20Database%20for%20PostgreSQL%20servers.svg' width='32' height='32' />)
    cache(<img src='https://icons.terrastruct.com/azure/_Companies/Azure%20Cache%20Redis%20Product%20icon.svg' width='32' height='32' />)
    ec2(<img src='https://icons.terrastruct.com/aws/_Group%20Icons/EC2-instance-container_light-bg.svg' width='32' height='32' />)
    ec2 <-->|get persisted data| aws_db
    ec2 <-->|get temporal data| cache
  end
  subgraph gcloud
    gcloud_db(<img src='https://icons.terrastruct.com/azure/Databases%20Service%20Color/Azure%20Database%20for%20PostgreSQL%20servers.svg' width='32' height='32' />)
  end
  aws_db -->|backup| gcloud_db
  dev(<img src='https://icons.terrastruct.com/essentials/005-programmer.svg' width='32' height='32' />)
  github(<img src='https://icons.terrastruct.com/dev/github.svg' width='32' height='32' />)
  dev -->|ssh| ec2
  dev -->|version control| github

To Reproduce Link to Live Editor: https://mermaid.live/edit#pako:eNrNVF1r2zAU_StCMLKBv2LHS2LawkjLGKTQNW8lEBTpxhazLSPJydIk_31XcdJ1sAfvbS_2udK5V-ceX-tAuRJAM7op1Y4XTFsyf17WhJh2nWvWFITtjIuJAyux_ngjq5wYzW8HhbWNycJQclWbwILWzFjdchtwVYXstdUQ3jPL1syA-RBHC9BbyQHRTJVKh18cA6MrB-FGaXw-KWNzDYvvcwwMZoE2gdnmA7KTwha3gyQekAJkXtgOh3efOo2c8QL-UeJqpqqG1RLMm6KZK4PvZxDSKX_SSmASIleonxTgcX8hOxOuvmrVNnjEN0cJH2axL2tjWc3BxxXLZA16VbqT_HXeWwO58f27Yw6WNOiiNBYEEWj48fI9_0K0UDVKs_LCO3vqaFCLPyYj56VqRVegw__5fFwa6Bonrt014z_a5vhbvtsXsO3dBRgDtZWsNGEUpX6jFXpTVaD76MmlLdr-jqGusEvpUxzZ5xaNKY7u-75fc4ZJVRM3V1qVx4sS6lFUXjEp8EI4uIQltQVUsKQZQgEb1pZ2Sb1uywBvtbT7OWyh7CilUgbZy_qEtdoGBwgehLRK02yDHoFHWWvVYl9zmmFjcCXdS-Z8e2Ph__iiVHUlYUizA_1Js2EaB-noczKKpqM4mcQTj-5plg6DZJom0yQZD9NJHCUnj76e86NgPE2iOMGddDRMo3HsUTgreuzuvfP1d_oF-ICrHQ

Expected behavior Images are rendered when securityLevel : loose is set.

Screenshots

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days

[subhash-halder]

@sidharthv96 I think this issue needs to be fixed from the mermaid repository, over here when we are calculating the image width and height we are getting the result as 0,0 from the getBoundingClientRect() because of max-width: 100% in file src/dagre-wrapper/nodes.js. I think here to calculate the exact width height we need to render the image temporarily in shadowDom (so no style can interfere) and remove it afterward. Please let me know your thought.

[sidharthv96]

There was one related PR in mermaid. https://github.com/mermaid-js/mermaid/pull/4268 I thought this would solve the issue, but it doesn't. Images were working previously, but stopped later.

[X-Raym]

Image are rendered they are not just not visible.

Workarround:

They can be shown by wrapping img tag into a div.

aws_db(<div style="width:250px;height:250px"><img src="https://icons.terrastruct.com/azure/Databases%20Service%20Color/Azure%20Database%20for%20PostgreSQL%20servers.svg"/></div>)

Another solution is to add text:

aws_db(<div><img src="https://icons.terrastruct.com/azure/Databases%20Service%20Color/Azure%20Database%20for%20PostgreSQL%20servers.svg"/></div>TEXT)

For sure, a fix and more CSS control on this would be nice!