如何在编辑页面Laravel中显示我上传的图像

时间:2018-01-09 03:43:35

标签: php laravel

所以我有这个编辑表单,我想显示我从创建表单上传的图像(它正在工作)所以当我编辑一个建筑物时,我只想看到我上传的旧图片因为它没有显示表格。编辑工作,但我想看到已上传的图片。我尝试使用“$ building-> picture”但不工作,我的数据库的列名是“picture”。

这是代码

   @extends('layouts.main')
@section('title', 'Edit Building')
@section('content')

{!! Form::open(array('route' => ['editbuilding',$id], 'class' => 'form' , 'files'=>'true')) !!}
<div class="container">

<div class="form-group">
    {!! Form::label('Building Name') !!}
    {!! Form::text('buildingname', $building->name,        array('required',
              'class'=>'form-control',
              'placeholder'=>'Building Name')) !!}
</div>
<div class="form-group">
  {!! Form::label('Building Name') !!}
  {!! Form::file('buildingpics',
     array('onchange'=>'previewFile()')) !!}
  <img src="{{asset(''.$building->picture) }}" id="previewImg" style="height:300px; width:300px;" alt="">
</div>


<div class="form-group">
    {!! Form::submit('Update',
      array('class'=>'btn btn-primary')) !!}
      <a href="{{route('index')}}" class="btn btn-default btn-md">Back</a>
</div>
</div>
{!! Form::close() !!}
<script type="text/javascript">

function previewFile() {
var preview = document.querySelector('#previewImg');
var file    = document.querySelector('input[type=file]').files[0];
var reader  = new FileReader();

reader.addEventListener("load", function () {
  preview.src = reader.result;
}, false);

if (file) {
reader.readAsDataURL(file);
}
}
</script>
@endsection

@section('scripts')

@endsection

3 个答案:

答案 0 :(得分:0)

您是否将网址存储在picture文件中的图片中?如果是这样,您只需将该网址传递到src代码的img即可。

<img src="{{ $building->picture }}" ... />

答案 1 :(得分:0)

首先选择保存文件的位置。我指的是存储文件的路径。

<img src="{{ url($building->picture) }}" ... />

如果您的文件位于公共文件夹中。

答案 2 :(得分:0)

asset() - 生成应用程序资产的URL。

根据您的文件夹名称更改folder_name的名称(如果有的话)在“assets”文件夹

  @if ($building->picture)

     <img src="{{asset('assets/'.$building->picture)}}">

  @else

     <p>No image found</p>

 @endif