Linking Images in Laravel - php

I am trying to create a dynamic image link (in Laravel 5.0), like this:
#foreach($result as $r)
<div>
<a href="{{URL::to('productdetail?id=<?php echo $r->id; ?>')}}">
<img src="..\public\uploads\{!! $r->fileName !!}" height="200" width="250"/>
</a>
</div>
#endforeach
and the link it generates is:
http://localhost:8000/{{URL::to('productdetail?id=1'}}
But I want to generate a link like this:
http://localhost:8000/productDetail?id=1
Any help?

Tux almost had it, but you need to put the variable outside the string. This should work:
<a href="{{ URL::to('productdetail?id='.$r->id) }}">
But why are you using a GET variable for this? The beauty of Laravel is that you can have the ID as part of the URL. If I was writing this I would have this in my routes file:
Route::get('/product/{stub}/{id}', ['as' => 'prodDetailPage', 'uses' => 'ProductDetail#index');
Then you could just use <a href="{{ route('prodDetailPage', [$r->stub, $r->id]) }}">
For stub you can create a function to turn the title into a stub, it would need to convert it to lower case, remove special chars and convert spaces to hyphens.

You can directly use:
#foreach($result as $r)
<div>
<a href="{{URL::to('productdetail?id=$r->id')}}">
<img src="..\public\uploads\{!! $r->fileName !!}" height="200" width="250"/>
</a>
</div>
#endforeach

Well, I have got this, actually I was putting the PHP tags at a wrong place, so the final link would be like this:
<div>
<a href="{!! URL::to('productdetail?id=') !!}<?php echo $r->id; ?>">
<img src="..\public\uploads\{!! $r->fileName !!}" height="200" width="250"/>
</a>
</div>

Related

Laravel: Can't Display Image In Blade File

I tried to display the image in the blade. but it cant load the image, it displays the image of else statement
<?php $user_image_path = 'images/user_images/' . $userDetails['image']; ?>
#if(!empty($userDetails['image']) && file_exists($user_image_path))
<img src=" {{ asset('images/user_images/'.$userDetails['image'])}}" alt="Cinque Terre">
#else
<img src="{{ asset('images/product_images/small/no_image.png') }}" alt="Cinque Terre">
#endif
I also debug the code above the if statement it fetches the image
<?php $product_image_path = 'images/user_images/' . $userDetails['image']; ?>
<?php
echo "<pre>";
print_r($user_image_path);
die;
?>
From above comments on your question, seems like you are loading the image with no extension. add the image extension
<img src="{{ asset('images/user_images/'.$userDetails['image'].".png") }}" alt="">
or for .jpg
<img src="{{ asset('images/user_images/'.$userDetails['image']).".jpg" }}" alt="">
Try:
<img src="{{ !empty($userDetails['image']) ? asset('images/user_images/'.$userDetails['image']) : asset('images/product_images/small/no_image.png') }}" alt="Cinque Terre">
It is the second condition of your if condition that doesn't match. The function of file_exists can't locate the the image file. You either have to provide the full path for the file_exists , or remove it:
#if(!empty($userDetails['image']))
<img src="{{ asset('images/user_images/'.$userDetails['image'])}}" alt="Cinque Terre">
#else
<img src="{{ asset('images/product_images/small/no_image.png') }}" alt="Cinque Terre">
#endif
Use this code:
<img src=" {{ !empty(asset('images/user_images/'.$userDetails['image'])) ? <img src="{{ asset('images/user_images/'.$userDetails['image'])}}" alt="Cinque Terre"> : <img src="{{ asset('images/product_images/small/no_image.png') }}" alt="Cinque Terre"> }}" alt="Cinque Terre">
#if(!empty($userDetails['image']))
<img src="{{ asset('images/user_images/'.$userDetails['image'])}}" alt="Cinque Terre">
View the src of image inside inspector. Most of the times it gives us the wrong path instead of public directory.
Secondly, there is space in src. Try to remove and run that.
If asset function doesn't give the public directory path, add ASSETS_URL In .env to /public

Laravel - display the first image from an array in blade.php

I am trying to display the first image from this array ["11.jpg","16.jpg"], the array is stored in a table column called images. I am writing
<img src="{{ asset('images/properties/'. $files->images) }}" class="">
in my blade.php
Nothing appears but it comes with this when I inspect the element
<img src="http://127.0.0.1:8000/images/properties/["11.jpg","16.jpg"]" class="">
I have also tried to display the first item in the array with this code, but the image doesn't appear.
How can I display the first image in blade.php.
<img src="{{ asset('images/properties/'. $files->images[0]) }}" class="">
Wow!!! i have found the solution.
The answer is to use json_decode() function.
<?php $property_images = json_decode($files->images);?>
<img src="{{ asset('images/properties/'. $property_images[0]) }}" class="">
Use array_first()
The array_first function returns the first element of an array
You have to store the array using json_encode. and while retriving just decode that data using json_decode.
<img src="{{ asset('images/properties/'. array_first(json_decode($files->images))) }}" />

for each loop around blade #sections is it possible

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

Laravel: Image not loading

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

How can I concatenate to the end of a route using Laravel?

I'm using Laravel to create a project.
Is there a way to concatenate to the end of a url using {{ route('routename') }} in an <a> tag?
I created a list of thumbnail images that link to a collection of fullsize images using a foreach loop.
#foreach ($images as $image)
<a href="{{ route('images') }}"> // link to full size image collection
<img src="{{ $image->url }}">// thumbnail image
</a>
#endforeach
{{ route('image') }} is a link to a paginated page that only contains one image per page.
so the url for the first image is my.site/images?page=1, the second is my.site/images?page=2 and so on and so on.
I'm wanting to route the user to the correct page=# according to the thumbnail they click on so they don't have to start form the beginning of the fullsize images each time the click a link from the thumbnails.
Im thinking I can use a foreach loop to increment a variable by 1 and concatenate that on the end of each href to get the correct page number but I'm not sure how I can do this using Laravel?
Im wanting my resulting html to look like this
<img src="thumbnail1.jpg">
<img src="thumbnail2.jpg">
<img src="thumbnail3.jpg">
<img src="thumbnail4.jpg">
<img src="thumbnail5.jpg">
...
Does anyone know a way?
The method you found out yourself works perfectly fine, but there is a more elegant one. All parameters you pass as second argument that are no actual route parameters (like {page}) will be appended as query string.
{{ route('images', ['page' => $n]) }}
I was able to make this work by using this code
<?php $n = 1; ?>
#foreach ($images as $image)
<a href="{{ route('images') . '?page=' . $n }}"> // link to full size image collection
<img src="{{ $image->url }}">// thumbnail image
</a>
<?php $n++; ?>
#endforeach

Categories