Я работаю над инструментом визуализации на основе d3, который позволяет пользователям выбирать пути на изображениях. Это прекрасно работало до тех пор, пока я не попытался позволить пользователю изменить фоновое изображение простым выпадающим списком.
Проблема заключалась в том, что javascript не может загружать файлы с диска с разрешения Cross-Origin. Поэтому решение, которое я выбрал, состояло в том, чтобы создать бэкэнд. Я выбираю Django.
Это код JavaScript, который манипулирует изображением:
window.LOADED_FILE = "PUT PATH HERE";
У меня есть рабочее раскрывающееся меню, в котором пользователь может выбрать изображение, и я получаю путь к файлу. ,После этого я попытался загрузить изображение следующим образом:
window.SVG.append("image")
.attr("width", window.WIDTH + "px")
.attr("height", window.HEIGHT + "px")
.attr("xlink:href", window.LOADED_FILE);
Это не работает вообще, и я получаю только изображение-заполнитель для запроса 404. Итак, попытался сделать следующее:
Прежде всего, это решение, которое я нашел здесь . Это прекрасно работает, но я не хочу, и я могу жестко закодировать каждое возможное изображение в HTML-файл, просто чтобы выбрать правильную переменную, когда пользователь хочет выбрать другое изображение позже, когда пользователь хочет. Поэтому мне нужно более динамичное решение.
После этого я попробовал после . Но когда я делаю console.log(DJANGO_STATIC_URL), я получаю пустой журнал. В файле settings.py содержится следующий статический URL-адрес: STATIC_URL = '/static/'.
Итак, я хочу найти решение о том, как загружать изображения с помощью JavaScript без предварительного их жесткого кодирования вHTML-файлЯ подозреваю, что я что-то неправильно понял или проигнорировал что-то очевидное.