Laravel Javascript图像交换下拉列表

Laravel Javascript Image Swap Dropdown List

本文关键字：下拉列表 交换 图像 Javascript Laravel      更新时间：2023-09-26

现在我正在使用Laravel 5.0开发电子商务购物网站，这是我的fyp，还有很长的路要走…无论如何。

和，我使产品显示页

这是我的控制器

     public function getView($id)
{
    return view('store.show')->with('products', Product::find($id))->with('categories',Category::all())->with('db',Product::all())->with('options', Gambar::where('product_id','=',$id)->lists('name', 'img'));
}
如您所见，在这一行的末尾有代码lists('name'， 'img')

它将列名称和图像值列在一个列表中

一切都工作完全接受，我需要下拉列表与图像更改选择。

查看下拉列表和imageswap的代码:

    <div class="form-group">
     {!! Form::open(array('url' => 'foo/bar')) !!}
     {!! Form::label('Link Category') !!}<br />
     {!! Form::select('product_id',(['0' => 'Select an Option'] + $options),null,['class' => 'form-control', 'id' => 'dlist', 'onChange' => 'swapImage()']) !!}
     {!! Form::close() !!}
     <script type="text/javascript">
     function swapImage(){
     var image = document.getElementById("imageToSwap");
     var dropd = document.getElementById("dlist");
     image.src = dropd.value;
     };
     </script>
    </div>

下面的代码将显示基于select (products->image)的主图像，而不是从下拉列表中的种子:

 <img id="imageToSwap" src="{{asset($products->image)}}"  />

列表流在控制器工作，但它给这个视图源chrome:

<img id="imageToSwap" src="img/upload/20-3-291-image-1.jpg"  />

所以图片不会出现在页面中，它应该是这样的

<img id="imageToSwap" src="localhost:8000/img/upload/20-3-291-image-1.jpg"  />

问题是，如何返回"img"与laravel资产{{asset()}}，使图像可以完美地显示?

问题出在laravel和javascript之间的通信。

正如您所指出的，您使用列表('name'， 'img'):资产前缀将不会添加到那里。

因此，当您执行image.src = dropd.value;时，图像的源不具有资产前缀。

我看到两种可能性:

  • 要么你在发送清单之前做一些治疗:lists('name', 'img')->map(asset)(使用map方法-不确定是否适用于laravel 5.0)
  • 或者添加到javascript中:image.src = "{{asset()}}/" + dropd.value;
相关文章：