vis-network节点信息内img标签设置宽高失效如何解决

问题原因 #

你遇到的是vis-network存储HTML字符串时的转义冲突+安全过滤双重问题：

• vis.DataSet默认会对存储内容中的行内style属性做XSS安全过滤，直接添加的style宽高会被自动移除，导致图片标签结构异常。
• 你在双引号包裹的JS字符串中多次用\"转义嵌套的双引号，多层转义容易出现解析错误，最终渲染时标签被破坏。

解决方法 #

方案1（最推荐）：统一用CSS控制图片宽高 #

直接在你的样式代码中添加针对节点详情区图片的规则，不需要修改任何img标签：

#nodeContent img {
  width: 50%;
  height: auto;
  /* 可按需补充圆角、边距等其他样式 */
}

这个方案不需要修改节点数据里的HTML内容，后续调整样式也不用改JS代码，维护成本最低。

方案2：用原生img属性控制宽高 #

如果需要给不同图片设置不同宽高，不用style属性，改用原生width/height属性，同时用单引号包裹属性值避免转义冲突：

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

width属性值默认单位为像素，不需要加单位，也不会被vis的安全规则过滤。

方案3：用模板字符串避免转义问题 #

如果一定要使用行内style属性，用ES6模板字符串（反引号`）包裹整个HTML内容，不需要手动转义引号：

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

模板字符串支持直接嵌套双引号/单引号，不会出现转义解析错误。

内容的提问来源于stack exchange，提问作者Codefun