Strange stuff going on here. For some reason the image loads correctly on one page, however the exact code im using does not work on the other page.
Code that works: index.blade.php
#if(count($posts) > 1)
#foreach($posts as $post)
<div class= "well">
<h2>{{$post->title}}</h2>
<small>{{$post->body}}</small>
<br>
<img src="{{$post->image}}" alt="profile Pic" height="200" width="200">
</div>
<br>
<br>
#endforeach
Code that does not work: Show.blade.php
<h1>{{$post->title}} </h1>
<br>
<h2>{{$post->body}}</h2>
<br>
<img src="{{$post->image}}" alt="profile Pic" height="250" width="250">
<div class= 'Info'>
<br>
PostsController.php
public function show($id)
{
$post = Post::find($id);
$review = Review::all()->where('post_id', $id);
return view('posts.show', compact('post', 'review'));
}
Im having issues with the img src part on show.blade.php. Everything else such as title and body is showing but the image on that page is not. Does anyone have this issue ?
You may use the url method to get the URL for the given file.
<img src="{{ Storage::url($post->image) }}" alt="profile Pic" height="250" width="250">
Also, to make public disk accessible from the web, you should create a symbolic link from public/storage to storage/app/public.
To create the symbolic link, you may use the storage:link Artisan command:
php artisan storage:link
The most common mistake in this problem is that do not pay attention to relative path.
Use absolute path for it.And you can use Inspect element of browser for compare 2 pages data.
Related
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 saved files(images) by DropzoneJS and I can get them everywhere I like, but my problem is how to edit them. I go to my products edit page I can see my image but have no idea how to edit them such as (delete some of them or add to them)
here is my code to get them:
public function edit($id)
{
$product = Product::findOrFail($id);
$images = DB::table('images')->where('imageable_id', '=', $product->id)->get();
// rest of codes
}
and I show my images in edit page like:
#foreach($images as $test)
<img src="{{url('/')}}/images/{{$test->name}}" alt="test" width="100" height="100">
#endforeach
screenshot
UPDATE
#linktoahref way works for me if I want to delete each of images, and he suggested to make new uploader for adding images into my product on edit page, not bad idea totally but it's not what I'm exactly looking for.
What I try to achieve is to use DropZone itself to return my exist
images of each product and be able to remove or add to it.
I read many questions,articles, etc. And I get that I have to use mockFile which i have no idea about it. Would be appreciate if someone can help me to get this done.
Thanks.
For DELETE, you could add a button next to the image that would fire the destroy method of the respective controller
#foreach($images as $test)
<img src="{{ url('/') }}/images/{{ $test->name }}" alt="test" width="100" height="100">
<a href="#" class="btn btn-danger"
onclick="event.preventDefault();
document.getElementById('image-{{ $test->id }}').submit();">
DELETE
</a>
<form id="image-{{ $test->id }}"
action="{{ route('images.destroy', ['id' => $test->id]) }}"
method="POST" style="display: none;">
{{ csrf_field() }}
{{ method_field('DELETE') }}
</form>
#endforeach
and handle the deletion of image in your ImageController's destroy method (or your custom controller's method, make sure the method types are same)
public function destroy(Image $image)
{
// Destroy the Image
Storage::delete($image->name);
// Redirect Back
return redirect()->back();
}
I have been learning "code" just over a year for a project i have and have got stuck on a particular function that i am trying to create for the user. I have lots of divs with different information being rendered from a database. Html and css looks great I have then created blade #sections to hold the info but struggling to add functionality.
#foreach($canal as $canal)
#section('water-left')
<img class="img-responsive" src="{{ asset('images/canals/' . $canal->image)}}">
#section('location')
<strong class="words myh4">{{$canal->name}}</strong>
#section('water-right')
<img class="img-responsive" src="{{ asset('images/canals/' . $canal->image)}}">
#endsection
#endsection
#endsection
#endforeach
I have paginated contents of database to 3 and am trying to attatch the id1 image to ('water-left'), the id2 name to ('location') and id3 image to('water-right') currently i get just id1 in all sections any help please my controller looks like this
public function getcanalimage()
{
$canal = Canal::paginate(3);
return view('waters.canal_fishing',compact('canal'));
}
any help would be much appreciated thanks.
Try to use foreach loop, because $canal is array with more one values and you need use a loop to show all them:
#section('water-right')
#foreach($canal as $item)
<img class="img-responsive" src="{{ asset('images/canals/' . $item->image)}}">
#endforeach
#endsection
It has been a while since the question was posted but, for anyone using Laravel 5.8, there seems to be an undocumented blade tag/directive called #overwrite.
So replacing #endsection with #overwrite should do the work.
#foreach($canal as $item)
#section('water-left')
<img class="img-responsive" src="{{ asset('images/canals/' . $canal->image)}}">
#section('location')
<strong class="words myh4">{{$item->name}}</strong>
#section('water-right')
<img class="img-responsive" src="{{ asset('images/canals/' . $item->image)}}">
#overwrite
#overwrite
#overwrite
#endforeach
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
I am trying to load an image in Laravel. The image is loading in a header.blade.php file. It is working fine on other pages but when it comes to localhost:8000/edit/id, It just doesn't work. I am loading Image like this:
<a href="{!! URL::to('/') !!}">
<img src="images/logo.png" />
</a>
My Route:
Route::get('edit/{id}', array('uses' => 'HomeController#edit'));
My Controller:
public function edit($id) {
$reg = Register::find($id);
$user = User::where('email', Session::get('email'))->first();
if ($reg->user_id == $user->id) {
return View::make('edit')
->with('id', $id);
} else {
return Redirect::to('dashboard')->with('wrong', 'Sorry! Something Went Wrong!');
}
}
My image directory: public/images/logo.png
It is working fine on other pages like localhost:8000/about but it doesn't work on localhost/edit/2, any help?
The problem is that when you are on your url, it is not looking for the image in the root folder of your application, but in the current location.
So when you are visiting localhost/edit/2, it is looking for the image in localhost/edit, instead of in localhost.
Try changing your code by adding a slash in the beginning of the image
<a href="{!! URL::to('/') !!}">
<img src="images/logo.png" />
</a>
to
<a href="{!! URL::to('/') !!}">
<img src="/images/logo.png" />
</a>
Additionally, you should actually try the laravel way, like this:
{{ HTML::image('images/logo.png', 'logo') }}
try
{{ HTML::image('images/logo.png', 'logo') }}
output will be like
<img src="http://your.url/images/logo.png" alt="logo">
also you can check image path using inspect element in browser
<img src="public/storage/cover_images/image_name.format" class="img-resposive">
it will load your picture otherwise check the path to image and previlages of the folders you can load image only from a public path due to security reasons