I am using Laravel to build a Events management system. Users can upload images to be displayed with their event. I have the img tag working on my index.blade.php and assumed I could use the same code on my show.blade.php page, it seems not.
I have the image stored in public/images and I am aware I should use storage for this but I am still learning basics so found this easier for now.
<img style="width:100%" src="images/{{$event->image}}">
As #Frank Ayyaz said you can use a backslash to solve this another Laravel-way is using public_path method which returns the fully qualified path to the public directory.
so you can do something like:
<img style="width:100%" src="{{ public_path('images/'.$event->image) }}">
Please use asset() method. The asset() method is used to include CSS/JavaScript/images files, you can use it as:
{{ URL::asset('images/'.$event->image) }}
<img style="width:100%" src="{{ URL::asset('images/'.$event->image) }}">
You can also use this function for CSS and js.
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
<script src="{{ asset('js/custom.js') }}"></script>
For detail please see this article:
https://medium.com/#zwacky/laravels-url-to-vs-url-asset-fd427ed6f7ef
I suggest Not to use URL::asset but only asset method because sometime URL may cause Problem while showing the image...and use dd() function and check whether u are getting the path i.e Public_path , storage_path() or the custom like the image are stored in public directory..
You may use asset() method of Laravel and use any Prefix whatever you like..
Example:
For static
<img src="{!! asset('assets/images/cams/cam-01.png') !!}" class="img-fluid"
alt="Card image cap">
For Dynamic
<img src="{!! $settings->aws_url.$performer->coverimage !!}" class="img-fluid" alt="Card image cap">
when u use js or css or images u should use {{asset('path')}} to get the resource, it has noting to do with the blade u use, but the resources path.
Related
I am trying to add images so I can see it on my views. I put the folder img inside the public folder and this is the code I am trying to see.
<?php $image = public_path() . './img/logo.png'; // destination path ?>
<h1>Royal <img src="{{$image}}"> Dice</h1>
All I get is this error in the console: Not allowed to load local resource.
I am learning Laravel but I think that this should be easy to solve. Thank you everyone!
Following should work:
<h1>Royal <img src="{{ asset('img/logo.png' }}"> Dice</h1>
You can find more about the asset helper in the laravel documentation: https://laravel.com/docs/8.x/helpers#method-asset
wite like this <h1>Royal <img src="{{ URL::to($image) }}"> Dice</h1>
or
<h1>Royal <img src="{{ asset($image) }}"> Dice</h1>
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">
I have some images stored in the following paths:
/storage/app/public/uploads/users/2/avatar/0d8c18a52732bc9b0068102338fbf29b.jpeg
or
/storage/app/public/uploads/users/3/avatar/0d123dfd32bc9b0068102338fbf29b.jpeg
I had this paths stored in the users table. How can I display it in my view.blade.php file ? I tried smth like this:
<img src="{{ url('/') }}{{ $user->avatar }}" alt="avatar">
But the image is not found on this path. Any idea ?
You need to use the syntax as
<img src='{{ asset("path-to-your-file") }}' alt='avatar'>
instead
<img src="{{ url('/') }}{{ $user->avatar }}" alt="avatar">
asset() points to public folder. path-to-your-file means the rest of the path
Edit
Additionally I have previously posted a similar answer. Please take a look at it too.
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 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) }}"/>