i am trying to show an image from the images folder however the image is not showing although i am able to see it in an array if i die and dump the "$image". The images are located in "public/images" folder
blade file
<div class="gallery">
#foreach($posts as $post)
<div class="round-post">
#foreach ($post->images as $image)
........
#endforeach
#endforeach
</div>[![enter image description here][1]][1]
when i <img src="/images/ <?php dd($image[0]); i get
this bunch of code get your images that exist in your images folder:
public function index(){
$images = \File::allFiles(public_path('images'));
return View('pages.form')->with(array('images'=>$images));
}
this will show the images in your blade.
<ul>
#foreach ($images as $image)
<li style="width:80px;display:inline-block;margin:5px 0px">
<input type="checkbox" name="images[]" value="{{$image->getFilename()}}"/>
<img src="{{ asset('images/' . $image->getFilename()) }}" width="50" height="50">
</li>
#endforeach
</ul>
for more information you can read this article.
Good luck my friend!
Related
I have multiple images in my table witch related to vehicle_id, like this,
image table
id fileName vehicle_id
1 1.jpg 1
2 2.jpg 1
3 3.jpg 1
4 4.jpg 1
5 28.png 2
5 28.png 2
6 29.png 2
7 30.png 3
8 31.png 3
9 56.png 3
The vehicle table have way to many relationship with the image table and data grap using eager loader in VehicleController
$vehicles = Vehicle::with('image')->get();
return view('vechicles.index')->withVehicles($vehicles);
Now these images are showing in the vehicles/index.blade.php file
#foreach($vehicle->images as $image)
<tr>
<td><img src="/images/{{ $image->resized_name }}"></td>
</tr>
#endforeach
My problem is occurred now, in this way, I can show all images in the table which related to proper vehicle_id but, I need only show one image (to matching vehicle_id) like thumbnail to above line.
Then how can I configure this?
updated Controller
public function index()
{
$vehicles = Vehicle::with('images')->get();
return view('vechicles.index')->withVehicles($vehicles);
}
updated full blade
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
#if($vehicles)
#foreach($vehicles as $vehicle)
{{$vehicle->district}}
{{$vehicle->town}}
{{$vehicle->brand}}
{{$vehicle->model}}
<hr>
#foreach($vehicle->images as $image)
<tr>
<td><img src="/images/{{ $image->resized_name }}"></td>
</tr>
#endforeach
#endforeach
#endif
</div>
</div>
</div>
#endsection
You are looping through every images right now. You can simply retrieve an image using code below:
$vehicle->images()->first()->resized_name
So your code to display image will be:
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
#if($vehicles)
#foreach($vehicles as $vehicle)
{{$vehicle->district}}
{{$vehicle->town}}
{{$vehicle->brand}}
{{$vehicle->model}}
<hr>
<tr>
<td>
<a href="{{route('vechicles.show',$vehicle->id)}}"><img
src="/images/{{ $vehicle->images()->first()->resized_name
}}"></a>
</td>
</tr>
#endforeach
#endif
</div>
</div>
</div>
#endsection
You can simply take only the first image. But be aware that you must verify if there are any images for that vehicle otherwise an exception will be thrown.
#if ($vehicle->images->isNotEmpty())
<a href="{{route('vechicles.show',$vehicle->id)}}">
<img src="/images/{{ $vehicle->images->first()->resized_name }}">
</a>
#endif
You can use limit along with with function like:
Vehicle::with(['image' => function($query) {
return $query->limit(1);
}])->get();
return view('vechicles.index')->withVehicles($vehicles);
And write code to show image as:
<tr>
<td><img src = "/images/{{ $vehicle->images[0]->resized_name }}"></td>
</tr>
You can use laravel first() function.
$vehicles = Vehicle::->where('vehicle_id', 1)->first();
You just have to dispaly the first array image in the blade as shown below:
#foreach ($vehicles as $v)
<img src = "/images/{{ $v->images[0]->resized_name }}"
#endforeach
(or) we can also use the laravel first() function to display the first record image from the collection
#foreach ($vehicles as $v)
<img src = "/images/{{ $v->images->first()->resized_name }}"
#endforeach
I have my image path in my database and now, i am trying to get the image into my html grid. But when i try to fetch the image, i get an error
Property [path] does not exist on this collection instance.
But then, there is path attribute in my table in the database. Has it got to be an error from my models? My model seems right to me. Anyway what am i not doing right here, please?
Thanks for your concern
HTML
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="{{$product->images->path}}" alt=" " class="img-responsive" />
<p>{{$product->name}}</p>
<h4>GH₵ {{ number_format($product->price,2) }} </h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
</fieldset>
</form>
</div>
</div>
</figure>
Image
public function products()
{
return $this->belongsTo(Product::class);
}
Product_images
public function images()
{
return $this->hasMany(Image::class);
}
You need to make a foreach as it's give you a collection.
Hence, try to display it like:
#foreach($product->images as $image)
#if($image->path)
<img src="{{ $image->path }}" alt=" " class="img-responsive" />
#else
<p>No image to display!</p>
#endif
#endforeach
Hope this will helps you!
This happens because the Product model hasMany Images.
In order to reach the path property you should do this:
#foreach($product->images as $image)
{{$image->path}}
#endforeach
Or do this in your Product Model and change your database structure
public function image()
{
return $this->hasOne(Image::class);
}
I hope it helps.
If your path does not any issue, the following is the correct way to display an image in Laravel blade template.
<img src="{{URL::asset('directory/name_of_image_file.file_format')}}">
You don't have field path in DB images
You code must be:
<img src="{{$product->images->[you field in Db images]}}" alt=" " class="img-responsive" />
HTML
#foreach($products as $product)
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<img src="{{$product->images->first()->path}}" alt=" " class="img-responsive" />
<p>{{$product->name}}</p>
<h4>GH₵ {{ number_format($product->price,2) }} </h4>
</div>
<div class="snipcart-details top_brand_home_details">
<form action="#" method="post">
<fieldset>
</fieldset>
</form>
</div>
</div>
</figure>
#endforeach
<a href="{{ route('product.view', $product->slug)}}">
<img src="{{$product->images->first()->path}}" alt=" " class="img-responsive" />
</a>
$product->images is a collection, you need to get the image out of the collection. for now I have used the first() which will fetch the first image, you may want to loop through the collection depending on your scenario. You may want to read about an answer have written here
I am working on the laravel 5.0. I am getting an error: "trying to get property of non-object".I want to get an image on the desired page by clicking on that particular image. There are so many images on the page, i just want after clicking on any image, it will be appear on the desired page.
here is my code:
My Routes:
Route::get('/image/big/{id}' ,[
'uses'=>'GalleryController#bigimage',
'as'=>'bigimage'
]);
My controller:
public function bigimage($id){
$images=image::findorFail($id);
return view('bigimage' , ['images'=>$images]);
}
My view from where i am calling the required Route:
#foreach($gallery->images as $image)
<li>
<a href="{{ URL('/image/big/'.$image->id) }}">
<img id="jumboimage2" src="{{ url($image->file_path) }}"></a>
</li>
<li>
<a href="{{ URL('/image/delete/'.$image->id) }}" id="margin">
<span id="margin" class="glyphicon glyphicon-remove-sign"></span></a>
</li>
#endforeach
My view where i want to get the required image:
<div class="row">
<section class="col-md-3">
#foreach($images as $image)
{{$image->id}}
#endforeach
</section>
</div>
try this one out
$image = image::findOrFail($id);
return view('bigimage' , ['image' => $image])
$images=image::findorFail($id); should be $images=image::findOrFail($id);.
findOrFail() returns a single model, i.e. one image, so I would have:
$image = image::findOrFail($id);
return view('bigimage' , ['image' => $image]);
You don't show where image:: comes from, however usually this is from a facade so is Image:: with a capital.
The view would then not have the #foreach loop as you'd only have a single image.
<div class="row">
<section class="col-md-3">
{{$image->id}}
</section>
</div>
You also need to elaborate on this to get from the id to an image but I'm assuming that's just not shown.
If you were able to give some detail about which line is causing the error this would make it easier to diagnose, as indicated by Maraboc there could be an issue with $gallery as well.
im developing a blog where all post can have more than one categories, and after I want those categories to be the class attribute from a div because im using data-filters to show those post that you select from the categories menu and hide those who are not part of the category.
Im using the next code but if you check {{$post->categorias[0]->nombre}} (where categorias is the category section to iterate and "nombre" is the name of the categories) only will show the first category and I want to show all the categories that belongs to that post, not only the first one.
#foreach($posts as $post)
<figure class="{{$post->categorias[0]->nombre}}">
<a href="project.html" class="thumb">
#foreach($post->imagenes as $imagen)
<img src="/imagenes/articulos/{{$imagen->url}}" alt="alt"/>
#endforeach
</a>
<figcaption>
{{$post->nombre}}</h3>
{{$post->contenido}}</figcaption>
</figure>
#endforeach
I've already tried to iterate inside class=" - " but didn't work, something like this:
<figure class="#foreach ($post->categorias as $po)
{{$po->nombre}}
#endforeach">
bud didn't work
I will appreciate any help. Thank you
BLADE
#foreach($posts as $key => $post)
<figure class="{{$post->categorias[$key]->nombre}}">
<a href="project.html" class="thumb">
#foreach($post->imagenes as $imagen)
<img src="/imagenes/articulos/{{$imagen->url}}" alt="alt"/>
#endforeach
</a>
<figcaption>
{{$post->nombre}}</h3>
{{$post->contenido}}</figcaption>
</figure>
#endforeach
The $key is the 'counter' to get the right data.
#foreach($posts as $post)
<figure class="#foreach($post->categorias as $key => $po)
{{$post->categorias[$key]->nombre}}#endforeach">
<a href="project.html" class="thumb">
#foreach($post->imagenes as $imagen)
<img src="/imagenes/articulos/{{$imagen->url}}" alt="alt"/>
#endforeach
</a>
<figcaption>
{{$post->nombre}}</h3>
{{$post->contenido}}</figcaption>
</figure>
#endforeach
Thanks to #djl for the help :)
I am very new to laravel. The route is as:
Route::get('/imagess','cont#imagess');
Route::get('/imagess/details/{id}','cont#image_details');
the functions inside the controller files are:
public function imagess() {
return view('imagess');
}
public function image_details($id) {
return view('image_details');
}
the view file is imagess.blade.php
#extends('inside.main')
#section('content')
<img src="{{asset('images/play.png')}}" height="100px" width="100px">View image 1<br>
<img src="{{asset('images/eat.png')}}" height="100px" width="100px">View image 2<br>
<img src="{{asset('images/sleep.png')}} height="10px" width="10px"">View image 3<br>
tihsajf
<img src="{{asset('images/read.png')}}" height="100px" width="100px">View image 4<br>
#endsection
What should be my imagess_details.blade.php to display basic details of each of those images? I am not trying to display exact details using database. just displaying anything. for eg. display 'hello' if i click image1, 'begineer' if i click image2, 'here' if i click image3 and so on..
if i make images_details as follows. it displays 'hello' whether i click image1, image2, or any other image.
#extends('inside.main')
#section('content')
<h2>hello</h2>
#endsection
If I understood you correctly, you're asking about transferring data from controller to the view:
public function image_details($id) {
$images = Images::all(); // get information about all images from database
return view('image_details')-with('images', $images); // transfer data to the view
}
The view gets all data inside $images collection, now you can iterate and get data:
#foreach ($images as $image) // iterate all images
<img src="{{ $image->src }}" alt="{{ $image->altText }}" height="100px" width="100px">{{ $image->name )}}<br>
#endforeach