如何使用全日历为每个id添加背景图像？

Question

我正在使用全日历插件

我构建了一个示例，并试图将图像显示为背景，如下所示：

保存在表教师中的每张图片都保存在应用程序中。

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代码上显示“未定义”：

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>