如何在R语言的highcharteR中使用Base64嵌入图片？

问题分析 #

出现空<img>标签的原因有两个：

1. base64enc::dataURI(file=)仅支持本地文件路径，直接传入远程URL无法正确生成Base64编码的图片数据；
2. 即使生成了正确的Base64字符串，JS代码中双引号的嵌套会导致字符串被提前截断，破坏<img>标签的格式。

修正代码 #

library(highcharter)
library(base64enc)
library(httr)

# 1. 从远程URL获取图片二进制数据并转换为Base64格式
image_url <- "https://www.highcharts.com/samples/graphics/sun.png"
img_response <- GET(image_url)
img_binary <- content(img_response, "raw")
image_data <- paste0("data:image/png;base64,", base64encode(img_binary))

# 2. 绘制气泡图并嵌入Base64图片到X轴标签
m <- matrix(1:12, 3, 4, dimnames=list(LETTERS[1:3], LETTERS[1:4]))

hchart(head(m, -1), "bubble", hcaes(), showInLegend = FALSE) %>% 
  hc_xAxis(type = 'category',
           labels = list(
             formatter = JS(
               sprintf(
                 "function(){\n                    if(this.value == 'A'){\n                      return '<img src=''%s''></img>';\n                    } else {\n                      return this.value;\n                    }\n                 }",
                 image_data
               )
             ),
             useHTML = TRUE
           ))

关键修正点 #

• 正确生成Base64数据：用httr::GET获取远程图片的二进制内容，再通过base64enc::base64encode转换为Base64字符串，最后拼接成标准的data:image/png;base64,...格式；
• 避免JS引号冲突：在JS的<img>标签中，用两个单引号''包裹Base64数据（相当于在JS里转义单引号），避免和外层的双引号或字符串本身的引号冲突。

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