How to debug Laravel Blade file during rendering - php

I'm working on a Laravel 7 app that is using data it gets from an API. Sometimes part of the data from the API is missing and I try to catch that firstly in the controller, secondly in the Blade view. But I still get crashes during rendering of the Blade view, that I have trouble debugging. I suspect that the crash occurs during rendering of statements like this:
<div class="flex-none">
<img src="{{ $game['coverImage'] }}" alt="cover">
</div>
or like this:
#foreach($game['screenshots'] as $screenshot)
#if(isset($screenshot))
<div>
<a href="{{ $screenshot['huge'] }}">
<image src="{{ $screenshot['big']}}" alt="screenshot"
class="hover:opacity-75 transition ease-in-out duration-150"></image>
</a>
</div>
#endif
#endforeach
Is there a way to dump the values of the variable during rendering of the Blade file? Equivalent to dd() or dump().
Or are there better ways to debug these crashes?
Kind regards,
Hubert

Related

Content esclusion on some page

Hi all i will be needing an assistance. I have a navbar that all link on my app use but i will like to seclude a search form from some of the link in the app but am having difficulty doing that. This what i have tried on my nabvar so far example
Tried using route but no success
#if( (route('portfolio') &&(route('portfolio.details)
content here
#else
content
#endif
then i tried targeting the URI
#if( Request::is('/portfolio') &&(route('portfolio/details)
content here
#else
content
#endif
None seems to working.
I don't think you should be using the route helper method in your if statement. I think if you just do something like this, it should work.
#if (request()->is('portfolio'))
content
#else
content
#endif

Display images with VueJS and Laravel

I am trying to display images with VueJS, but it either prints {{ activity.image }} or shows a compilation error. These are the attempts:
<img :src="'{{ activity.image }}'"> // Displays {{ activity.image }}
<img :src="{{ activity.image }}"> // Error
<img :src="'#{{ activity.image }}'"> // Displays #{{ activity.image }}
<img v-bind="src:'{{ activity.image }}'" alt=""> // Error
<img v-attr="src:'{{ activity.image }}'" alt=""> // Error
<img :src={{ activity.image }} alt=""> // Error
How do I do it?
I assume activity.image is coming from the JavaScript, since you're using the dot notation.
You can use v-bind:src="activity.image", yes, without the mustache.
or if it came from PHP, you should be using the -> operator.
v-bind:src="{{ $activity->image }}", you need those mustache for the Blade rendering, however you don't need the mustache for the Vue.
Try like this
<img :src="'/images/'+item.images" alt="image" />
Try like this:
Note: img is in public folder
<templete>
<img :src="getImage()" class="card-img-top" alt="" />
</templete>
<script>
export default {
methods:{
getImage(){
return 'img/images.jpg';
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
You can directly point to the image:
<img src="/images/logo.png">
Maybe someone has similiar problems. I use Vue2, with Vuetify2 and Laravel as my Backend. I tried to first show my image within my Blade file and afterwards with the right path in my Vue component to solve this problem. This worked for me:
Inside my blade file
<img src="{{ asset('images/aaa.jpg') }}">
Vue Component
<img src="images/aaa.jpg">
I tried various approaches with dynamic binding and so forth but this finally worked.
try to add '/' before the link
Inside blade file:
<img src="{{ asset($table->img) }}">
Vue Component:
<img :src="'/' + table.img">

php getimagesize function is freezing server

I'm having a problem with the getimagesize function, it freezes the server.
#foreach($categories as $category)
<span>{{$category->thumb}}</span>
<div class="box-categoria">
<a href="{{$category->generateCategoryUrl()}}">
#if(isset($category->thumb)&&$category->thumb != ""&&getimagesize($category->thumb))
<img src="{{$category->thumb}}" width="150"/>
#else
<img src="{{asset('assets/images/no-thumb.jpg')}}" width="150"/>
#endif
<div class="overlay"></div>
</a>
</div>
#endforeach
This works normally in another computers, it works even in the production server.
This project uses the Laravel framework, artisan server and the url of the image is like this:
http://www.portaldamarcaelectrolux.com.br/owners/575889d6024f03012e4273b6/categories/f18058073cffbcba22945e57544b120a.jpg
Thanks
It's very strange to put this check (getimagesize) in a blade view. It's back-end logic, and very bad for the performance to check this on the fly. A better way is to put this logic simplified like below in your blade view without the if-else condition.
<img src="{{$category->thumb}}" width="150" onerror="this.src='/assets/images/no-thumb.jpg';"/>
So if the thumb doesn't exist, the image no-thumb will be loaded.

Img not displaying correctly in Symfony

My twig file goes like this :
Let us try to see an image :
<img src="{{ absolute_url(asset('app/Resources/images/bulb.png')) }}" alt="Symfony!" width="42" height="42"/>
Trying it another way :
<img src="app/Resources/images/bulb.png" alt="Symfony!" width="42" height="42"/>
But when I go to that page in Symfony, I see something like this :
What did I do wrong ?
currently, twig is going to be trying to find your asset in:
/web/app/Resources/images/bulb.png
use instead:
{{ asset('#AppBundle/Resources/public/images/bulb.png', absolute=true) }}
note the use of an additional public folder. If you must store assets in app, then this is sensible.
However, #Ewan Delanoy is correct, you really should be storing all your assets directly in the web folder.
Then you can just call
{{ asset('images/bulb.png', absolute=true) }}

Laravel 4.1 blade linking to user profile picture

I am trying to link to a user profile image in Laravels blade template but I am only getting errors here.
This is my image tag containing the link:
<img class="img-circle dashboardprofileimage" src="{{ URL::asset('img/profile_pictures/users/{{ Auth::user()->profile_picture }}') }}"/>
I would be very happy if anyone could help me out here. I guess its a simple thing but I have tried quite a lot of times now.
Thanks.
Your error is using nested {{ }}, you just need it once. Check out the correct code below:
<img
class="img-circle dashboardprofileimage"
src="{{
URL::asset('img/profile_pictures/users/' . Auth::user()->profile_picture)
}}" />
Note: it's splited into several lines for better legibility.
you just use {{ }} one time to print URL::asset() and Auth::user()
<img class="img-circle dashboardprofileimage" src="{{ URL::asset('img/profile_pictures/users/'.Auth::user()->profile_picture) }}"/>

Categories