带有背景图片样式的标题, 复制到公众号后台，保存后样式丢失

[ShirleyZmj]

前提

我上个月 fork 了本仓库代码，拉了新分支 进行开发，想添加自己的定制化主题。

第一步：修改了 theme.ts

这是修改了 theme.ts 的部分。本地开发时候用的路径。发现复制时候在微信后台无法显示。就改成了上传到语雀上后的图片链接，也就是线上链接。

// 一级标题
    h1: {
      'padding': `0 1em`,
      'margin': `2em auto 1em`,
      'color': `hsl(var(--foreground))`,
      'font-size': `1.3em`,
      'font-weight': `bold`,
      'text-align': `center`,
      // 'background-image': `url('/src/assets/images/orange-logo.png')`,
      'background-image': `url('https://cdn.nlark.com/yuque/0/2025/png/35340046/1748999854524-c3db6f1f-20aa-4fb6-b7a2-841bc7053920.png')`,
      'background-repeat': `no-repeat`,
      'background-position': `top center`,
      'background-size': `4em`,
      'padding-top': `4em`,
      'gap': `1em`,
    },

    // 二级标题
    h2: {
      'padding-left': `8px`,
      'border-left': `6px solid var(--md-primary-color)`,
      'border-bottom': `1px dashed var(--md-primary-color)`,
      'margin': `2em 8px 0.75em 0`,
      'color': `hsl(var(--foreground))`,
      'font-size': `1.2em`,
      'font-weight': `bold`,
      'line-height': `1.2`,
    },

    // 三级标题
    h3: {
      'padding-left': `0.8em`,
      'position': `relative`,
      'margin': `2em 8px 0.75em 0`,
      'color': `hsl(var(--foreground))`,
      'font-size': `1.1em`,
      'font-weight': `bold`,
      'line-height': `1.2`,
      'background-image': `radial-gradient(circle, var(--md-primary-color) 0.25em, transparent 0.25em)`,
      'background-position': `-9em center`,
      'background-repeat': `no-repeat`,
    },

第二步，在编辑器里修改文案

我把 base 改成 "/" 后在本地运行，线上链接的 logo 消失

这是在编辑器里的样子（此时logo消失）

第三步，复制到公众号后台，一切正常

第四步，点击保存草稿/预览后，样式崩盘 （本地重点的问题）

求助

请问是什么原因呢？如何解决

[YangFong]

1. 不能使用语雀 cdn，存在防盗链问题。
2. 复制到公众号没问题，是因为它会检测图片资源并上传到另一个 cdn 当中。
3. 而保存样式丢失的问题，有几种可能，现在无法确认你是哪一种。你可以先试试我们的线上版是否可用，如果保存依然丢失，那么是你的公众号编辑器有点差异；如果没问题，那么说明和你的改动内容有关。

[ShirleyZmj]

1. 不能使用语雀 cdn，存在防盗链问题。
2. 复制到公众号没问题，是因为它会检测图片资源并上传到另一个 cdn 当中。
3. 而保存样式丢失的问题，有几种可能，现在无法确认你是哪一种。你可以先试试我们的线上版是否可用，如果保存依然丢失，那么是你的公众号编辑器有点差异；如果没问题，那么说明和你的改动内容有关。

h1 {
      background-image: url('https://www.en369.cn/upload/2022-12-12/20221212230225811656.png'),
      background-repeat: no-repeat,
      background-position: top center,
      background-size: 4em,
      padding-top: 4em,
      gap: 1em,
}

1. 我在代码里改成了线上的图片地址，在本地运行的环境能够正常显示了。但是我把这部分css复制粘贴在网站上通过编辑css的方式，是无法显示图片的, 不论是本地或者是官方网站，你可以试试。
2. 这样操作之后复制到公众号后台，同样无法显示。
3. 保存后同样样式丢失。所以可能是我改动的上面这段css有些问题？

本地

线上版

[gofunn]

我也遇到了，使用微信公众号官方的Web编辑器，只要点击保存为草稿，代码中的空格会莫名丢失，原本正常的函数定义，会全都挤在一起。

[zeevenn]

我也遇到了，使用微信公众号官方的Web编辑器，只要点击保存为草稿，代码中的空格会莫名丢失，原本正常的函数定义，会全都挤在一起。

#944 已修复

[zeevenn]

@ShirleyZmj 我试了下背景图是生效的