将多个图像添加到叶地图标记中的多个 html iframe？

Question

我有一些数据框，我从中提取了一些列表，然后我创建了一个 for_loop 以便遍历这些列表并将所需的信息插入到叶地图标记中。 这是代码：

sa_df = pd.DataFrame({
    "name":["Al_riyad","Makkah","Aseer","Al_madinah","Eastern_region","Northern_borders","Al_bahah","Najran","Jazan","Al_qaseeem","Hail","Al_jawf","Tabuk"],
    "latitude":[23.05,21.389082,19.15,24.9,24.0,30.25,20.16667,18.41667,17.33333,27.08333,27.4,30.05,28.25],
    "longitude":[45.55,39.857910,42.95,39.5,49.75,42.41667,41.43333,46.91667,42.66667,43.46667,41.45,39.6,37.16667],
    "images":["alriyad.png","makkah.png","aseer.png","madina.png","eastern_region.png","northern_borders.png","albahah.png","najran.png","jazan.png","alqaseem.png","hail.png","aljawf.png","tabuk.png"],
    "population":["8,216,284","8,557,766","2,211,875","1,423,935","4,900,325","365,231","476,172","582,243","1,567,547","1,423,935","699,774","508,475","910,030"],
    "dfs_deaths":[alriyad["deaths"].sum(), makkah["deaths"].sum(), aseer["deaths"].sum(), madina["deaths"].sum(), eastern_region["deaths"].sum(), northern_borders["deaths"].sum(), albahah["deaths"].sum(), najran["deaths"].sum(), jazan["deaths"].sum(), alqaseem["deaths"].sum(), hail["deaths"].sum(), aljawf["deaths"].sum(), tabuk["deaths"].sum()],     
    "dfs_recovories":[alriyad["recovories"].sum(), makkah["recovories"].sum(), aseer["recovories"].sum(), madina["recovories"].sum(), eastern_region["recovories"].sum(), northern_borders["recovories"].sum(), albahah["recovories"].sum(), najran["recovories"].sum(), jazan["recovories"].sum(), alqaseem["recovories"].sum(), hail["recovories"].sum(), aljawf["recovories"].sum(), tabuk["recovories"].sum()],
    "dfs_cases":[alriyad["cases"].sum(), makkah["cases"].sum(), aseer["cases"].sum(), madina["cases"].sum(), eastern_region["cases"].sum(), northern_borders["cases"].sum(), albahah["cases"].sum(), najran["cases"].sum(), jazan["cases"].sum(), alqaseem["cases"].sum(), hail["cases"].sum(), aljawf["cases"].sum(), tabuk["cases"].sum()]
})

lat = list(sa_df["latitude"])
lon = list(sa_df["longitude"])
name = list(sa_df["name"])
image = list(sa_df["images"])
population = list(sa_df["population"])
deaths = list(sa_df["dfs_deaths"])
recovories = list(sa_df["dfs_recovories"])
cases = list(sa_df["dfs_cases"])

m = folium.Map(location=[23.8859,45.0792], zoom_start=4)
fg = folium.FeatureGroup(name="My Map").add_to(m)

for lt,ln,nm,img,ppl,dths,reco,case in zip(lat, lon, name, image, population, deaths, recovories, cases):
    html = f'''
        <p>region: {nm}<p/>
        <p>population: {ppl}<p/>
        <p style="color:blue">total_cases: {case}<p/>
        <p style="color:green">total_recovories: {reco}<p/>
        <p style="color:red">total_deaths: {dths}<p/>
        <p>date: feb_2021</p>
        <img src="{img}">'''
    iframe = folium.IFrame(html, width=300, height=400)
    popup = folium.Popup(iframe , max_width=400)
    marker = folium.Marker([lt,ln], popup=(popup), tooltip="click for covid-19 info").add_to(m)
    m.add_child(marker)
m

如您所见，我在 python 文件的同一目录中有一些图像，我使用 f_string 将变量插入 HTML 并循环遍历它们。 当我运行代码时，一切都很好。标记显示所需的信息，但图像未显示在这里是它的样子：。我看到了这个：Adding JPG Images to folium popup 但我不明白它是如何工作的，除了 f 字符串会涉及 HTML 字符串中的任何花括号。我该如何解决这个问题？换句话说，有没有办法解码多个图像，遍历它们，然后将它们插入到叶弹出窗口中而不拦截 f 字符串，或者如果有另一种方法而不是 f 字符串？ windows 10 python 3.9.1 初学者。

Answer 1

在对格式方法和 f-string 方法进行了一些研究后，我发现我只需要进行以下操作：

for lt,ln,nm,img,ppl,dths,reco,case in zip(lat, lon, name, image, population, deaths, recovories, cases):
    encoded = base64.b64encode(open(img, 'rb').read()).decode()
    html = f'''
        <p>region: {nm}<p/>
        <p>population: {ppl}<p/>
        <p style="color:blue">total_cases: {case}<p/>
        <p style="color:green">total_recovories: {reco}<p/>
        <p style="color:red">total_deaths: {dths}<p/>
        <p>date: feb_2021</p>
        <img src="data:image/jpeg;base64,{encoded}">'''
    iframe = folium.IFrame(html, width=300, height=300)
    popup = folium.Popup(iframe , max_width=400)
    marker = folium.Marker([lt,ln], popup=(popup), tooltip="click for covid-19 info").add_to(m)
    m.add_child(marker)