代码之家  ›  专栏  ›  技术社区  ›  hendraspt

如何在Laravel 5的模式/弹出窗口中显示图像?

  •  0
  • hendraspt  · 技术社区  · 8 年前

    我正在使用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>
    
    2 回复  |  直到 8 年前
        1
  •  0
  •   Aref Ben Lazrek    8 年前

    试试看

    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);

        2
  •  0
  •   Leslie    8 年前

    你确定图像路径为真?只需使用chrome view source,并找到属于该图片的路径,单击该路径即可查看是否可以显示该图片。

    就像这样:

    enter image description here

    推荐文章