Как добавить фоновые изображения для каждого идентификатора, используя fullcalendar?

Question

Я использую плагин fullcalendar

Я создаю пример и пытаюсь показать изображения в качестве фона, например:

Каждое изображение сохраненона столе учителя сохраняются внутри приложения.

route: app/public/uploads/teacher/1/abc.jpg
route: app/public/uploads/teacher/2/def.jpg

Помощник avatar_url показывает:

/public/uploads/teacher/1/abc.jpg
/public/uploads/teacher/2/def.jpg

Проблема в том, что я не могу правильно отобразить каждое изображение от каждого учителя.

Таблица - Учителя

|id| |name|  |avatar|
  1   ABC    abc.jpg
  2   DEF    def.jpg

Таблица - Бронирование

|id||teacher_id| |date_ini|  |date_end|
 1     1         2018-11-01  2018-11-01 
 2     2         2018-11-01  2018-11-01 

HTML-код:

<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      eventRender: function(event, element) { 
        element.find('.fc-event-title').append( '<br>'+event.teacher_id);
        element.find('.fc-event-inner').css("background","url("+ event.teacher.avatar_url +") no-repeat right");
      }

    })
  });
</script>        

Я пробовал этот код, но он не работал:

element.find('.fc-event-inner').css("background","url( event.teacher.avatar_url) no-repeat right");

Я попробовал этот код и не работал опцию фона

element.find('.fc-event-inner').css("background","url(<%= event.teacher.avatar_url %>) no-repeat right");

Я попробовал этот код и не работал, но на HTML-дисплее отображается "undefined":

element.find('.fc-event-inner').css("background","url("+ event.teacher_id.to_s +") no-repeat right");

Я попробовал этот код и не работал, но не отображает фон:

element.find('.fc-event-inner').css("background","url("+ event.teacher.avatar_url.to_s +") no-repeat right");

Я пробовал и не отображаю.

Я буду оценивать предложения и комментарии.

Заранее спасибо.

Answer 1

Попробуйте установить фоновое изображение непосредственно для элемента, как показано в примере ниже, и убедитесь, что вы получаете URL-адрес изображения в ответе:

<script>
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      eventRender: function(event, element) { 
        element.css("background","url("+ event.teacher.avatar_url +") no-repeat right");
      }

    })
  });
</script>