HTML IMG tag not working

[sjackson0109]

I'm trying to use a HTML <IMG> tag, with a SVG (or PNG, or any other image type) Trying a mixture of using HTML with Mermaid Scripts, Visual Studio with Markdown and Mermaid preview panes, and the mermaid.live editor.. i cannot get images to load properly within the mermaid code:

Markdown file:

## Markdown Image
![vNetIcon](/docs/images/networking/vnet.svg "vNet Icon")

## Mermaid Image
::: mermaid
flowchart LR
    subgraph Border
        subgraph vNet[HUB]
            direction TB
            Subnet("Subnet <br /> 10.1.1.0/24")
            
        end
        vNetIcon[<img src='/docs/images/networking/vnet.svg' />]
    end
%% Defining Class Styles
classDef vNet fill:#dfe5f3,stroke:#4698eb,stroke-width:2px,color:#000,stroke-dasharray: 8 4;
classDef Subnet fill:#fff,stroke:#4698eb,stroke-width:1px,color:#000,stroke-dasharray: 4 8;
classDef vNetIcon width:30px,height:30px;

%% Custom Styles
style Border fill:#fff,stroke:#fff,stroke-width:4px,color:#fff,stroke-dasharray: 5 5;

%% Assigning Nodes to Classes
class Border Border;
class vNet vNet;
class Subnet Subnet;
class vNetIcon vNetIcon;
…

Screenshot:

Expected behavior: I expect the vnet icon (as shown in the Markdown image section) should appear where the black box is located inside the Mermaid Image section.

[sjackson0109]

More relevant screenshot showing the image placeholder..

[sjackson0109]

Okay, after plaing about with this, i've managed to use reletive path references (instead of absolute) and it's working. Been playing around with CSS styling inline, and removing margin and blocking display overlay is useful:

flowchart LR
    subgraph Border
        subgraph vNet[HUB]
            direction TB
            Subnet("Subnet <br /> 10.1.1.0/24")
            vNetIcon[<img src='../images/networking/vnet.svg' />...]
        end
    end
%% Defining Class Styles
classDef vNet fill:#dfe5f3,height:120px,stroke:#4698eb,stroke-width:2px,color:#000,stroke-dasharray: 8 4;
classDef Subnet fill:#fff,stroke:#4698eb,stroke-width:1px,color:#000,stroke-dasharray: 4 8;
classDef vNetIcon margin:0px auto,padding:0px,display:block;

%% Custom Styles
style Border fill:#fff,stroke:#fff,stroke-width:4px,color:#fff,stroke-dasharray: 5 5;

%% Assigning Nodes to Classes
class Border Border;
class vNet vNet;
class Subnet Subnet;
class vNetIcon vNetIcon; 

[sjackson0109]

Observed behaviour:

Example	Status
vNetIcon["<img src='../images/networking/vnet.svg' />"]	Missing icon, likely off-set somewhere with CSS
vNetIcon["<img src='../images/networking/vnet.svg' />..."]	Right-Sized icon
vNetIcon["<img src='../images/networking/vnet.svg' />.."]	Smaller than expected icon
vNetIcon["<img src='../images/networking/vnet.svg' />."]	Tiny icon, not useful

[olivierduquenoy]

You need to set the size of your shape with the style attribute.

Try this :

SVG1["<p style='width:40px;height:40px;margin:0px'/p><img src='../images/networking/vnet.svg' />"]
SVG2["<p style='width:40px;height:40px;margin:25px'/p><img src='../images/networking/vnet.svg' />"]

More funny, you can either use the table attribute. Try this :

SVG3["<table><tr><td><p style='width:40px;height:40px;margin:0'/p><img src='../images/networking/vnet.svg' /></td><td>2 images</td><td><p style='width:40px;height:40px;margin:0'/p><img src='../images/networking/vnet.svg' /></td><tr></table>"]

[sjackson0109]

I could be wrong; but HTML v1-5 all support IMG object types, and all forms of styling (attribute or inline styling or css styling).. they all support WIDTH and HEIGHT attributes.Wrapping the image in another object, span/table/paragraph, that has those attributes set, is not a solution - it’s a workaround.On 30 Nov 2022, at 16:25, olivierduquenoy @.***> wrote: You need to set the size of your shape with the style attribute. Try this : SVG1["<p style='width:40px;height:40px;margin:0px'/p>"] SVG2["<p style='width:40px;height:40px;margin:25px'/p>"]

More funny, you can either use the table attribute. Try this : SVG3["

<p style='width:40px;height:40px;margin:0'/p>	2 images	<p style='width:40px;height:40px;margin:0'/p>

"]

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>