How can I insert png symbol into web map legend with folium-python 3

Question

This code is part of other big code that generate a web map with folium module:

 legend_html = '''
     <div style="position: fixed; 
     bottom: 40px; left: 50px; width: 100px; height: 110px; 
     border:2px solid grey; z-index:9999; font-size:14px;
     background-color: white;
     ">&nbsp; Legend <br>
     &nbsp; aaa &nbsp;          <i class="fa fa-map-marker" style="color:blue"></i><br>
     &nbsp; bbb &nbsp;      <i class="fa fa-truck" style="color:pink"></i><br>
     &nbsp; ccc &nbsp;        <i class="fa fa-map-marker" style="color:green"></i><br>
     &nbsp; shapefile &nbsp;    <img src= r"D:\GIS\sdr\abc.png" width="10" height="10"> 

     </div>
     '''

in the line of the shapefile, I try to described the shapefile polygon in the legend with a png file from this location: D:\GIS\sdr\abc.png

When i run the code- the web map generated, but in the legend i can't see the png symbol

Answer 1

I found this selution: add a url image insteed od add it from the PC hard disk:

&nbsp; shapefile &nbsp;    <img src= 'https://some link to url/aaa.png' width="20" height="20"> 

Answer 2

You can use a path/relative path instead of directory, and since the .png file is in sampe project folder (or let's say an "src" folder withing project folder) do something like this:

<img src= '/src/my_icon.png' width="20" height="20">