Currently, I'm working on developing an eCommerce Shopping Site using Laravel 5.0 for my final year project. Although there is still a long way to go, I have made progress by creating a product show page.
Here is a snippet of my controller:
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'));
}
One particular code I'd like to point out is lists('name', 'img') at the end of the line. This code is used to list out the column names and image values.
Everything was working perfectly, except for the need to create a dropdown list with image changes on selection.
Below is the code for my dropdown list and image swap:
<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>
Then, there's the code where the image will appear based on the selection (products->image is the main image, not one selected from the dropdown list):
<img id="imageToSwap" src="{{asset($products->image)}}" />
The issue I faced was that while the List flow in the controller worked, it gave this output in the Chrome view source:
<img id="imageToSwap" src="img/upload/20-3-291-image-1.jpg" />
The image did not appear on the page as it should have. It should have displayed like this:
<img id="imageToSwap" src="localhost:8000/img/upload/20-3-291-image-1.jpg" />
My question is, how can I return the "img" with Laravel asset {{asset()}}, so that the image can be displayed perfectly?