Question

我正在使用Laravel 5并拥有访问者列表。当我单击其中一个访问者名称时，它会显示一个模态，并包含它的详细信息。但我不知道如何在上面显示访客照片？在我的数据库中，我只保存文件的名称以下是显示模态页面的代码：

<td>
<a data-toggle="modal" data-target="#editvisitor_modal" 
onclick="editvisitor_modal('{{ $Data->VST_ID }}'
                             , '{{ $Data->VST_NAME}}'
                             , '{{ $Data->VST_FROM}}'
                             , '{{ $Data->VST_MEET}}'
                             , '{{ $Data->VST_PURPOSE}}'
                             , '{{ $Data->VST_AGENDA}}'
                             , '{{ $Data->VST_PHONE}}'
                             , '{{ $Data->VST_EMAIL}}'
                             , '{{ date('d-m-Y H:i', strtotime($Data->VST_CHECKIN)) }}'
                             , '{{ $Data->VST_CHECKOUT}}'
                             , '{{ $Data->VST_PHOTO}}')">{{ $Data->VST_NAME }}
</a>
</td>

这是将数据抛出到模态的javascript：

function editvisitor_modal(VST_ID, VST_NAME, VST_FROM, VST_MEET, VST_PURPOSE, VST_AGENDA, VST_PHONE, VST_EMAIL, VST_CHECKIN, VST_CHECKOUT, VST_PHOTO) {
  $('#edit_vst_id').html(VST_ID);
  $('#edit_vst_name').val(VST_NAME);
  $('#edit_vst_from').val(VST_FROM);
  $('#edit_vst_meet').val(VST_MEET);
  $('#edit_vst_purpose').val(VST_PURPOSE);
  $('#edit_vst_agenda').val(VST_AGENDA);
  $('#edit_vst_phone').val(VST_PHONE);
  $('#edit_vst_email').val(VST_EMAIL);
  $('#edit_vst_checkin').val(VST_CHECKIN);
  $('#edit_vst_checkout').val(VST_CHECKOUT);
  $('#edit_vst_photo').val(VST_PHOTO);
}

这是我的模态页面中的代码：

<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Photo</label>
<div class="col-md-8 col-sm-8 col-xs-12">
    <img src="{{ asset('photos/tomas_logo.jpg') }}" width="40%">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Name<span class="required"> *</span></label>
<div class="col-md-8 col-sm-8 col-xs-12">
    <input class="form-control" id="edit_vst_name" name="edit_vst_name"  maxlength="100" placeholder="Visitor Name" value="" required>
</div>
</div>

Answer 1

试试

function editvisitor_modal(VST_ID, VST_NAME, VST_FROM, VST_MEET, VST_PURPOSE, VST_AGENDA, VST_PHONE, VST_EMAIL, VST_CHECKIN, VST_CHECKOUT, VST_PHOTO) {
  $('#edit_vst_id').html(VST_ID);
  $('#edit_vst_name').val(VST_NAME);
  $('#edit_vst_from').val(VST_FROM);
  $('#edit_vst_meet').val(VST_MEET);
  $('#edit_vst_purpose').val(VST_PURPOSE);
  $('#edit_vst_agenda').val(VST_AGENDA);
  $('#edit_vst_phone').val(VST_PHONE);
  $('#edit_vst_email').val(VST_EMAIL);
  $('#edit_vst_checkin').val(VST_CHECKIN);
  $('#edit_vst_checkout').val(VST_CHECKOUT);
  $('#edit_vst_photo').attr("src","{{asset('your-image-folder/')}}"+VST_PHOTO);
}

<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Photo</label>
<div class="col-md-8 col-sm-8 col-xs-12">
    <img id="edit_vst_photo" src="placeholder.png" width="40%">
</div>
</div>

修改

如@hendraspt的评论中所述，它通过添加'/'来起作用。

$('#vstphoto').prop("src","{{asset('photos/')}}"+'/'+VST_PHOTO);

Answer 2

你确定图像路径是真的吗？只需使用chrome view-source，找到属于pic的路径，点击它查看它是否可以显示图片。

就像这样：

如何在Laravel 5中以模态/弹出方式显示图像？

2 个答案: