Javascript 如何使用fullcalendar为每个id添加背景图像？

我正在使用fullcalendar插件

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

保存在表格上的每张图片都保存在应用程序中

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

助手化身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.to_s +") no-repeat right");

我尝试了上面的方法，但没有显示出来

我将感谢您的建议和评论

---

提前感谢。

尝试直接将背景图像设置为元素，如下例所示，并确保您在响应中获得图像URL：

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

    })
  });
</script>   

$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar({
eventRender:函数（事件，元素）{
css（“背景”、“url”（+event.teacher.avatar_url+））无重复权）；
}
})
});

您的第一个代码

.css（“背景”，“url”（+event.teacher.avatar\u url+”），无重复权）

应该是正确的，只要

event.teacher.avatar\u url

包含有效图像的有效url，该图像存在于服务器的正确位置。不幸的是，你没有给我们任何信息，我们可以通过这些信息来验证，所以你必须自己调试它。

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

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

    })
  });
</script>