Setting the widht and height of an image inside a Javascript-CodePudding

This javacript shows info about a node in a network when you click on the node. If I use an image as info it works but as soon as I try to set the width and height of the image it doesn't work anymore. Probably because it has to be done inside the javascript. Any ideas?

So inside the javascript this works:

 info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\"> "

But if i want to add width and height it doesn't work anymore. Example:

info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\" style="width:50%"> "

This is the code:

<html>
   <head>
      <script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<style>
#header-network
  {
      width: 50vw;
      vertical-align: center;
      text-align: left;
      line-height: 20px;
      margin: auto;
  }
  @media screen and (max-width: 767px) {
    #header-network {
    width: 90vw;
    }
  }
  #nodeContent {
    position: relative;
    border: 1px solid lightgray;
    width: 50vw;
    height: auto;
    margin: auto;
    padding: 10px;
    word-break: break-word;
    white-space: pre-wrap;
  }
  @media screen and (max-width: 767px) {
    #nodeContent {
    width: 90vw;
    }}
    
    #mynetwork {
      width: 80vw;
      height: 40vh;
      margin: auto;
      border: 0px solid lightgray; 
    }
    @media screen and (max-width: 767px) {
      #mynetwork {
      width: 90vw;
      }}
      </style>
  </head>
  
  <body>
    <div id="header-network">
        <p>header text</p></div>
        <div id="mynetwork"></div>
          <div id="nodeContent">
          <pre id="pre-field">Click on a node to show content here</pre>
    </div>
  
  <script type="text/javascript">
     
   // create an array with nodes
   var nodes = new vis.DataSet([
     { id: 1, 
      label: "node 1" ,
      
     info1: "<h3>Title</h3>",
     info2: '<p>paragraph text example.paragraph text example. paragraph text example. paragraph text example.paragraph text example.<br><b>Example of a link:</b> <a href=\"http://bing.com\">Bing</a>. </p>',
     info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\"> "
      },
    
      { id: 2, 
      label: "node 2" , 
      
info1: "<h3>Title 2</h3>",
     info2: '<p>paragraph text example.paragraph text example. paragraph text example. paragraph text example.paragraph text example.<br><b>Example of a link:</b> <a href=\"http://bing.com\">Bing</a>. </p>',
     info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\"> "
      },

   ]);

   // create an array with edges
   var edges = new vis.DataSet([
     { from: 1, to: 2 },
     

   ]);
 
   // create a network
   var container = document.getElementById("mynetwork");
   var data = {
     nodes: nodes,
     edges: edges,
   };
   var options = 
      {
            
        nodes: 
        {
            shape: "circle",
            color: "rgba(234, 246, 255, 1)",
      
            margin: 5,
            widthConstraint: { 
                minimum: 75,
                },
            heightConstraint: { 
                minimum: 75,
                },
        },
        
       edges: { 
         color: {
           inherit: 'to',
         }}, 

      };

   var network = new vis.Network(container, data, options);

   
      network.on("click", function (params) {
        if (params.nodes.length > 0) {
            var nodeId = params.nodes[0]; // get the data from selected node
            document.getElementById("nodeContent").className = "div.nodeContent";
            document.getElementById("nodeContent").innerHTML = nodes.get(nodeId).info1   nodes.get(nodeId).info2   nodes.get(nodeId).info3; // show the data in the div 
            
        }
      });
      
 </script>


 </body>

</html>

CodePudding user response：

please use back tick for adding width

info3: `<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\" style="width:50%">`

use backslash with quotes when adding width

info3: "<b>Example of an image:</b> <br><img src=\"https://www.w3schools.com/images/w3schools_green.jpg\" alt=\"W3Schools.com\" style=\"width:50%\">"