如何在XML中插入图片？

XML本身没有原生的图片渲染语义，要实现“直接在XML中插入图片”的需求，根据你的作业要求可以选择以下两种方案：

方案1：XML中嵌入Base64编码的图片（完全不依赖外部资源，纯XML内置图片） #

这种方案是把图片转成Base64字符串直接存到XML节点内，所有资源都打包在XML文件中，不需要额外依赖外部图片文件或独立的XSLT样式文件。

• 第一步：将你需要插入的图片转为Base64编码字符串，提前去掉编码结果中的换行、空格等冗余字符
• 第二步：在XML中定义图片节点，可通过type属性标注图片的MIME类型，同时可以直接在XML内置CSS样式实现直接渲染，完整示例如下：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"?>
<catalog>
  <item>
    <name>高等数学上册</name>
    <!-- 这里嵌入png格式的base64图片，仅展示前缀做示例 -->
    <image type="image/png" alt="教材封面">iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAYAAAB1ovlvAAAAAXNSR0IArs4c6QAA...</image>
  </item>
  <!-- 内置样式，浏览器打开XML可直接渲染内容 -->
  <style type="text/css">
    image {
      content: attr(type) ";" base64(data(.)), attr(alt);
      display: block;
      width: 200px;
      margin: 10px 0;
    }
    name {
      display: block;
      font-size: 16px;
      font-weight: bold;
    }
  </style>
</catalog>

方案2：XML中引用外部图片路径（实现简单，适合图片较多的场景） #

如果不需要把图片打包进XML，直接在XML节点中存储图片的相对/绝对路径即可，同样可以通过内置CSS实现直接渲染，不需要单独编写XSLT文件：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css"?>
<catalog>
  <item>
    <name>高等数学上册</name>
    <image src="img/math_cover.png" alt="教材封面" width="200" height="280"/>
  </item>
  <style type="text/css">
    image {
      content: url(attr(src));
      display: block;
      width: attr(width) px;
      height: attr(height) px;
    }
  </style>
</catalog>

注意事项 #

• 上述两种方案的内置样式规则，主流浏览器（Chrome、Edge、Firefox）都可以直接识别渲染，打开XML文件就能看到图片，不需要额外的转换步骤
• 如果作业要求只能存储纯XML数据、不能带任何样式声明，只保留图片节点的内容即可，后续需要读取XML的工具自行解析渲染即可，不需要额外配置

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