- Добавьте, как минимум в две модели по полю с картинкой.
- Реализуйте возможность указывать картинку у новых объектов, и менять картинку у существующих моделей.
- Реализуйте открытие модального окна с картинкой при клике на картинку (ну, чтобы поближе рассмотреть можно было)
Чтобы сделать поле с картинкой, его надо сначала добавить на стороне бекенда.
class Student(models.Model):
name = models.TextField("ФИО")
group = models.ForeignKey("Group", on_delete=models.CASCADE, null=True)
# добавим ImageField, в upload_to указываем папку куда загружать файл
picture = models.ImageField("Изображение", null=True, upload_to="students")
# ...
прогоняем миграции
python manage.py makemigrations
python manage.py migrate
добавляем в сериалайзер
далее еще надо добавить в settings.py добавляем конфиг, куда сохраняем файлы
MEDIA_ROOT = BASE_DIR / "media"
MEDIA_URL = "/media/"
далее добавляем папку media в .gitignore
теперь идем на фронт, добавляем специальную переменную под файл студента на форму
const studentsPictureRef = ref();
в разметке добавляем поле для выбора файла и подвязываем через специальный атрибут ref
теперь идем в метод добавления объекта и там пишем:
если мы хотим, чтобы файл было видно после выбора, вешаем событие выбора файла на input с файлом и добавить поле, в котором будет хранится ссылка на загруженный файл
должно работать так:
и теперь, чтобы фотки были видны у записей, надо добавить в vite.config.js
затем добавить обработку media в роутер бекенда
ну и выводить в списке генерирую картинку:
получится вот так:
