Показать карту фолиума, полученную в JsonResponse от django, с помощью javascript

Я отправляю карту фолиума через django JsonResponse. При рендеринге я просто не могу заставить его показать карту. Я использую d3.js. Я просто не понимаю, как добавить эквивалент действия '|safe'.

Вот мое мнение:

def show_map(tuple_lat_lon, name):
    start_coords = tuple_lat_lon[0]
    folium_map = folium.Map(
        location=start_coords,
        zoom_start=14
    )
    folium.CircleMarker(
        tuple_lat_lon[0],
        radius=8,
        popup=name,
        color='#3186cc',
        fill=True,
        fill_color='#3186cc'
    ).add_to(folium_map)

folium.Polygon(tuple_lat_lon).add_to(folium_map)

buffer = io.BytesIO()
plt.savefig(buffer, format='png')
buffer.seek(0)
image_png = buffer.getvalue()
buffer.close()
graphic = base64.b64encode(image_png)
graphic = graphic.decode('utf-8')
return graphic

farm_map = show_map(tuple_lat_lon, 'MyMap')

return JsonResponse({
       'farm_map':farm_map,
        })

Вот мой код d3.js:

var farm_map = block_details_response['farm_map'];
d3.select('#block_map').append('img').attr('src', farm_map);

вот html:

<div id="block_map"></div>

Я могу видеть, когда я проверяю html, код изображения... но не изображение.

Так что я хочу знать:

1. Is it a good idea to send folium map in response? I did it cause I call a lot of my own apis on the web page.
2. As tutorials suggest, this the way to show the map:{{ farm_map | safe }} . I can't do that since I am using d3.js . Essentially javascript. I tried d3.select('#block_map').append('img').attr('src', farm_map + '|safe'). Did not work.

Любые идеи приветствуются

Вернуться на верх