在 Javascript 中设置图像的宽度和高度

Question

当您单击节点时，此 javacript 会显示有关网络中节点的信息。如果我使用图像作为信息，它可以工作，但是一旦我尝试设置图像的宽度和高度，它就不再工作了。可能是因为它必须在 javascript 内完成。有什么想法吗？

所以在 javascript 里面这个有效：

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

但是如果我想添加宽度和高度，它就不再起作用了。示例：

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

这是代码：

<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>

Answer 1

请使用反勾号来增加宽度

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

或

添加宽度时使用带引号的反斜杠

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

在 Javascript 中设置图像的宽度和高度

Setting the widht and height of an image inside a Javascript

javascript

image

vis.js