如何解决Folium地图添加自定义静态图片无法正常显示的问题？

你遇到的核心问题是：使用的URL不是图片的直接访问地址，而是网页链接——比如Imgur的相册页、GitHub的文件预览页，这类链接指向的是包含图片的网页，而非图片文件本身，Folium无法从网页中提取图片，所以会显示带"?"的占位符。

下面是具体的解决步骤：

一、获取图片的直接访问URL #

你需要拿到直接指向图片文件的URL（通常后缀是.jpg/.png/.gif这类格式）：

1. 处理Imgur图片 #

• 打开你的Imgur相册页，点击目标图片进入单独的图片详情页。
• 在图片上右键选择「复制图片地址」，或者查看浏览器地址栏：正确的直接访问URL应该以i.imgur.com开头，而非imgur.com，比如类似https://i.imgur.com/odmnKy6.jpg（具体以实际复制的地址为准）。

2. 处理GitHub图片 #

• 打开你的GitHub文件预览页，点击页面右上角的「Download」下拉按钮，选择「Copy raw link」。
• 复制后的链接会以raw.githubusercontent.com开头，比如你的图片对应的原始链接是https://raw.githubusercontent.com/maxmuller100/ideas/master/Screenshot%202021-05-30%20at%2015.34.50.jpg，这才是直接指向图片文件的有效地址。

二、验证URL有效性 #

把拿到的直接URL粘贴到浏览器地址栏，确认能直接显示图片——如果可以，这个URL就可以用于Folium。

三、Folium中添加图片的正确代码示例 #

以在Marker的Popup中插入图片为例，代码如下：

import folium

# 初始化地图
map_obj = folium.Map(location=[45.5236, -122.6750], zoom_start=13)

# 替换为你获取的直接图片URL
target_img_url = "https://raw.githubusercontent.com/maxmuller100/ideas/master/Screenshot%202021-05-30%20at%2015.34.50.jpg"

# 构建包含图片的HTML弹窗
popup_content = f'<img src="{target_img_url}" width="300">'
image_popup = folium.Popup(popup_content, max_width=300)

# 添加标记并绑定弹窗
folium.Marker(
    location=[45.5236, -122.6750],
    popup=image_popup
).add_to(map_obj)

# 保存并生成地图文件
map_obj.save("custom_image_map.html")

四、额外注意事项 #

• 确保你的图片URL是公开可访问的：如果是GitHub私有仓库的图片，即使是原始链接也会有权限限制，无法加载。
• 优先选择web兼容的图片格式：JPG、PNG、GIF等都是安全选项。
• 可以通过调整HTML中的width参数控制图片在弹窗中的显示大小，避免图片过大导致排版异常。

内容的提问来源于stack exchange，提问作者Max Lonysa Muller