如何在FullCalendar事件弹出Modal模态框中展示对应图片

问题分析 #

现有代码存在两处可优化的点：

1. 定义imageurl字段时错误嵌套了HTML标签和引号，语法不规范，实际只需要存储图片路径即可
2. 未给statusImage设置默认值，非Pass状态下会出现变量未定义问题

实现步骤 #

1. 修正PHP生成事件数据的逻辑

首先给状态图片增加默认值，同时修正imageurl字段的赋值：

<?php 
// 原有代码不变
$status = $row['Status1'];
// 新增默认值逻辑，避免变量未定义
$statusImage = 'calendarStatusImage/default.jpg';
if($status == 'Pass'){
  $statusImage = 'calendarStatusImage/pass.jpg';
}
// 可自行扩展其他状态对应的图片路径
// 原有代码不变
?>

对应事件配置中的imageurl字段修改为仅存储路径：

{  
  title: '<?php echo $id?>',
  start: '<?php echo $newEnd?>', 
  end: '<?php echo $newEnd?>', 
  // 修正这里，去掉嵌套的img标签，仅存路径
  imageurl : '<?php echo $statusImage?>',
  // 其余配置不变
}

2. 模态框HTML新增图片容器

在你的successModal的modal-body区域新增img标签，放在你想要展示图片的位置：

<div class="modal" id="successModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <!-- 新增图片容器，可自定义样式控制大小 -->
        <img id="eventStatusImg" alt="状态图片" style="max-width: 200px; margin: 12px 0;">
        <!-- 你原有para、para1~para7的标签全部保留 -->
        <p id="para"></p>
        <p id="para1"></p>
        <!-- 其余原有标签不变 -->
      </div>
    </div>
  </div>
</div>

3. 修改eventClick事件赋值图片路径

在点击事件里新增给图片设置src的逻辑：

eventClick: function(event) {
  $("#successModal").modal("show");
  // 新增这一行赋值图片路径
  $("#successModal .modal-body #eventStatusImg").attr('src', event.imageurl);
  // 原有赋值逻辑全部保留
  $("#successModal .modal-body #para").text(event.title);
  $("#successModal .modal-body #para1").text(event.extendedProps.ownerid);
  // 其余原有代码不变
}

注意事项 #

如果图片加载失败，可检查图片路径是否正确，相对路径是相对于当前打开的页面路径计算，可更换为绝对路径测试兼容性。

内容的提问来源于stack exchange，提问作者Steve Kush