I have a Laravel 5.1 project that I'm trying to improve and now migrating some features to Vue.js to make it more interactive and stuff.
In my view I have
<img src="{{ file_storage_path($product->path) }}" alt="{{$product->name}}"/>
This is default implementation using Laravel's blade.
Now, when I delegate this to the Vue.js I would have something like this
<img src="{{ file_storage_path(product.path) }}" alt="#{{product.name}}"/>
But this of course fails. So I need both - to invoke a php-function and at the same time to render Vue data.
I tried this
src="{{ file_storage_path( #{{product.path}} ) }}"
But of course this fails too. any suggestions?
Since I couldn't find a way to inline both blade syntax and Vue.js variable rendering I see the solution is to first invoke the php function and then append the Vue.js rendering to it.
So, the workaround would be
<img :src="'{{ file_storage_path('/') }}' + image.path" alt="#{{product.name}}" />
This solution would work only for specific case, it doesn't get answer to my original question, when a php function actually needs to accept a Vue variable. But in this case, I can simply append values.
Related
I am trying to use Laravel 8 Livewire Modal Popup for data entry with going on another page. But I get undefine the variable _instance and not able to understand it.
#entangle($attributes->wire('model'))
This line creates this error when I remove this from views/vendor/jetstream/components/modal.blade.php. the error will go.
Line no 34.
<div id="<?php echo e($id); ?>" x-data="{ show: <?php if ((object) ($attributes->wire('model')) instanceof \Livewire\WireDirective) : ?>window.Livewire.find('<?php echo e($_instance->id); ?>').entangle('<?php echo e($attributes->wire('model')->value(
x-show="show"
x-on:close.stop="show = false"
x-on:keydown.escape.window="show = false"
class="fixed top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center"
style="display: none;">
This was causing me much angst too but I think I found the solution: as #georgy-malanichev says, you can only call Livewire methods from inside a Livewire component (and not from inside a Blade component or any other custom components).
Given you are trying to use the component inside resources/views/dashboard.blade.php, the solution is to:
create a livewire component using artisan make:livewire MyDashboard
Cut everything between <x-app-layout> and </x-app-layout> in dashboard.blade.php and paste it into views/livewire/my-dashboard.blade.php
Add #livewire('my-dashboard') inside the x-app-layout tags and Bob's your uncle (it should start working)
To help you understand what's going on, if you look at the source code for the modal component, you'll see a line like: show: #entangle($attributes->wire('model')),. I'm not sure how to describe exactly what this does, but, essentially, #entangle() is expecting an instance of the "model" Livewire object and it's not finding one.
It's not finding it because it's getting called from a non-livewire component. Once you put it inside a Livewire component, it starts working.
I hope the additional details makes things clearer.
I was getting the same error but in my case it was the fact that I had x-data="{ open: #entangle('showDropdown') }" outside of the LiveWire component. Once I moved it inside the component template, where it should be, the issue went away.
I want to display avatar in my page but I do not know how to do it. Look, here's my script. It doesn't work. Can you help me?
#foreach($user->user_data as $data)
<img alt="" src="{{ asset('/storage/uploads/avatars/ {{ $data->avatar }} ') }}">
#endforeach
There is a storage_path helper in laravel. Try using this:
#foreach($user->user_data as $data)
<img alt="" src="{{ storage_path('uploads/avatars/' . $data->avatar) }}">
#endforeach
Link to the doc: https://laravel.com/docs/5.5/helpers#method-storage-path
If you have installed Laravel the normal way you can't link to the storage folder directly because it's located outside of the public folder.
Only the contents of the public folder are accessible to the outside world.
There are two ways to work around this limitation, depending on how sensitive the stored data is.
If anyone may access the file, the easiest solution is to create a symlink from inside your public folder to the avatar storage folder.
If the file needs to be protected, create a Controller class that authorises the user and then returns the desired data from the storage_path.
In your case it sounds like solution 1 would suffice, and fortunately for you Laravel has built-in support for this.
By executing the following command in your command line Laravel will create a symbolic link from public/storage to storage/public:
php artisan storage:link
You can then create a link to anything that is stored in storage/public by using the asset function
asset('storage/path_relative_to_storage_public')
For a more detailed explanation, see: https://laravel.com/docs/5.5/filesystem#the-public-disk
In Laravel, code inside {{ }} will be interpreted as php code, You can Try this One :
#foreach($user->user_data as $data)
<img alt="" src="{{ asset('/storage/uploads/avatars/'. $data->avatar) }}">
#endforeach
It's like you do:
<img alt="" src="<?php echo asset('/storage/uploads/avatars/'. $data->avatar); ?>">
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) }}
I have been stumped for a couple days and I am seeking some direction.
I am attempting to call an image path stored in database to twig file in order to display said image. The twig example below, I am expecting the same image to be displayed twice. When inspecting the rendered html, the variable passes the path from the database, but the first image is not displayed.
From controller:
'logo' => $vendor->getLogovendors()
From database column logoVendors:
<img src={{asset('bundles/loginlogin/img/fs_logo_large.png')}} />
From twig:
<div class="container">
{{logo | raw}}
<img src={{asset('bundles/loginlogin/img/fs_logo_large.png')}} />
</div>
I am new to Symfony and its asset management. Any help or prodding in the right direction would be appreciated.
You should normally store only the path to the image in your database!
If logo was the variable you pass to the template holding the image path bundles/loginlogin/img/fs_logo_large.png you could simply include it using twig's asset function like this:
<img src="{{ asset(logo) }}"/>
what you're trying to do ( evaluating a twig function inside a string ) can be solved aswell...but i don't recommend it.
If you want to store the complete code including {{ asset() }} in your database you need to make twig evaluate the code inside the string.
This means twig shall execute the code inside the string instead of just printing it.
This can be achieved using the evaluate filter from this answer.
The final result would then be:
{{ logo |evaluate |raw }}
I have the html template where i image is referenced as images/logo.gif
Now in Symfony templates i have to use
src="{{ asset(['images/', 'logo.gif']|join) }}"
Is it possible to use something like
src="{{ asset(['images'])}}/logo.gif
so that i need not replace all the image tags in html file. Then i can find and replace easily. Othwise i have to manually change all image occurances
Why don't you just use this?
src="{{ asset('images/logo.gif') }}"
EDIT:
I didn't try it but concatenation should work as well:
{% set imageDir = 'images/' %}
src="{{ asset(imageDir ~ 'logo.gif') }}"
However, it introduces unnecessary complexity. I don't see anything wrong in a hard coded version. You don't change it often.