style 为字符串时，包含 类似于 data:image/svg xml;base64, 会渲染成 data:image/svg xml;

[r3x5ur]

相关平台

微信小程序

小程序基础库: 3.7.4
使用框架: React

复现步骤

• 只需要渲染这个代码即可复现

<Text
      className="icon-inner"
      style={`--icon-content: url(data:image/svg xml;base64,1222222);`}
></Text>

期望结果

正常显示：style="--icon-content: url(data:image/svg xml;base64,1222222);"

实际结果

被分号截断了
style="--icon-content: url(data:image/svg xml;"

环境信息

👽 Taro v3.6.34


  Taro CLI 3.6.34 environment info:
    System:
      OS: Windows 10 10.0.19045
    Binaries:
      Node: 18.19.1 - D:\Program Files\nodejs\node.EXE
      Yarn: 1.22.22 - D:\Program Files\nodejs\yarn.CMD
      npm: 10.2.4 - D:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.34 => 3.6.34
      @tarojs/components: 3.6.34 => 3.6.34
      @tarojs/helper: 3.6.34 => 3.6.34
      @tarojs/plugin-framework-react: 3.6.34 => 3.6.34
      @tarojs/plugin-platform-alipay: 3.6.34 => 3.6.34
      @tarojs/plugin-platform-h5: 3.6.34 => 3.6.34
      @tarojs/plugin-platform-jd: 3.6.34 => 3.6.34
      @tarojs/plugin-platform-qq: 3.6.34 => 3.6.34
      @tarojs/plugin-platform-swan: 3.6.34 => 3.6.34
      @tarojs/plugin-platform-tt: 3.6.34 => 3.6.34
      @tarojs/plugin-platform-weapp: 3.6.34 => 3.6.34
      @tarojs/react: 3.6.34 => 3.6.34
      @tarojs/runtime: 3.6.34 => 3.6.34
      @tarojs/shared: 3.6.34 => 3.6.34
      @tarojs/taro: 3.6.34 => 3.6.34
      @tarojs/taro-loader: 3.6.34 => 3.6.34
      @tarojs/webpack5-runner: 3.6.34 => 3.6.34
      babel-preset-taro: 3.6.34 => 3.6.34
      eslint-config-taro: 3.6.34 => 3.6.34
      react: ^18.0.0 => 18.3.1

[r3x5ur]

基本可以确定：解析字符串格式的样式时是使用的分号进行切割的，导致出现此 bug
我下面的这种写法是没问题的

const innerStyle = {
        '--icon-content': iconContent ? `url(${iconContent})` : 'none',
} as CSSProperties

<Text className="icon-inner" style={innerStyle}></Text>