使用react-globe渲染全球标记时，如何在标记悬浮提示框中正确展示图片？

我之前也碰到过类似的坑，核心问题是你搞错了markerTooltipRenderer的返回值要求——这个函数需要返回React元素，而不是HTML字符串或者模板字符串！

你原来的写法要么返回转义后的HTML片段（被组件当成普通文本处理，甚至因为格式错误变成[object Object]），要么直接返回标签字符串（组件会原样输出文本），自然没法渲染出图片。

正确的实现方式 #

直接返回JSX元素就可以了，react-globe会正确识别并渲染它：

function markerTooltipRenderer(marker) {
  return <img src={marker.image} alt={marker.city} />;
}

如果你的代码环境不支持JSX（比如普通JavaScript文件），可以用React.createElement来创建元素：

function markerTooltipRenderer(marker) {
  return React.createElement('img', {
    src: marker.image,
    alt: marker.city
  });
}

额外注意事项 #

• 确保marker.image是有效的图片路径：如果是本地图片，记得用import导入后再赋值给marker.image；如果是网络图片，要保证URL可以正常访问。
• 如果需要给图片添加样式（比如固定宽高），直接在JSX里加style属性或者className即可：

return <img src={marker.image} alt={marker.city} style={{ width: '80px', height: '60px' }} />;

这样修改后，标记悬浮时提示框里就能正确显示图片啦！

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