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

我正在使用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>

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

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

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

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

照片
名字*

试试看

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>

功能编辑访客模式（VST_ID、VST_名称、VST_发件人、VST_会面、VST_目的、VST_日程、VST_电话、VST_电子邮件、VST_签入、VST_签出、VST_照片）{
$（'#edit_vst_id'）.html（vst_id）；
$（'edit#u vst_name'）.val（vst_name）；
$（'edit#u vst_from'）.val（vst_from）；
$（'edit#u vst_meet'）.val（vst_meet）；
$（'edit#vst_purpose'）.val（vst_purpose）；
$（'edit#u vst_agenda'）.val（vst_agenda）；
$（'edit#u vst_phone'）.val（vst_phone）；
$（'edit#u vst_email'）.val（vst_email）；
$（'#edit_vst_checkin'）.val（vst_checkin）；
$（'edit#u vst_checkout'）.val（vst_checkout）；
$（'#edit_vst_photo'）.attr（“src”，“{asset（'your-image-folder/'）}}”+vst_photo）；
}
照片

编辑

正如@hendraspt在评论中指出的，它通过添加“/”来工作

---

$（'#vstphoto'）.prop（“src”、“{{asset（'photos/'）}}”+'/'+VST_PHOTO）
你确定图像路径是真的吗？只需使用chrome view source，并找到属于图片的路径，单击它查看是否可以显示图片

就这样,

仍然需要获取src值，即“placeholder.png”。我得到一个错误
gethttp://localhost/tomas/public/placeholder.png 404（未找到）
@hendraspt是否尝试将attr更改为propis src？是否完全不更改？是否存在任何js错误？它根本没有更改，仍然请参考
placeholder.png
。当我重新加载页面时，我的控制台中出现了一个错误
GEThttp://localhost:8080/tomas/public/placeholder.png 404（未找到）
我在js中没有看到任何错误。您是否已将id添加到img？关于占位符您可以删除它或添加一个plcaholder图像。这并不提供问题的答案。一旦你有足够的资源，你将能够胜任任何职位；相反