Can laravel built-in html elements be overridden? for example, consider HTML:image tag. I am wondering if I can override it in order to show 'no_available_image.svg' when the given image path doesn't exist.
You can't override an <img> tag (or you shouldn't), but there are other ways to achieve an image fallback.
Also, take in account that HTML:image tag is not a Laravel built-in element, is just HTML and Laravel has nothing to do here.
Blade PHP solution
Check that file exists. If not, it will echo the fallback image.
#if (file_exists(public_path('path/to/image.jpg')))
<img src="{{ asset('path/to/image.jpg') }}">
#else
<img src="{{ asset('images/no_available_image.svg') }}">
#endif
Vue + Blade solution
Following this question, you can create a Vue component like this:
ImgFallback.vue
<template>
<object :data="src" type="image/png">
<img :src="fallback" />
</object>
</template>
<script>
export default {
props: {
src: String,
fallback: String
}
}
</script>
then register it in your app.js
Vue.component('img-fallback', require('./components/ImgFallback.vue'));
So then in your blade templates you can use:
<img-fallback
src="{{ asset('wrong_image_path') }}"
fallback="{{ asset('images/no_available_image.svg') }}">
</img-fallback>
Reusing code
Since you will be using blade and the same fallback image in all cases, you don't want to repeat the fallback attribute everytime, so you can create a blade template called for example image.blade.php and put in the javascript or PHP option. Then in your views call:
#include('image', [ 'path' => 'path/to/your/image.jpg' ])
And use the $path variable to fill the src attribute in the image.blade.php file.
#if (file_exists(public_path($path)))
<img src="{{ asset($path) }}">
#else
<img src="{{ asset('images/no_available_image.svg') }}">
#endif
or
<img-fallback
src="{{ asset($src) }}"
fallback="{{ asset('images/no_available_image.svg') }}">
</img-fallback>
Related
I have a dynamic image that a user can change, so I need to grab the path from the database. Everything works fine if I do:
<img src="/storage/{{ $client->image->path }}">
But this doesn't work:
<img src="{{ asset('/storage/{{ $client->image->path }}') }}">
Thank you for your help
You've already opened the curly braces once. You can process it in accordance with the syntax. Try like this:
<img src="{{ asset('/storage/' . $client->image->path) }}">
I want to change the logo in my header on certain pages.
I'm therefore extending my layout like this:
#extends('templates.main', ['logo' => 'img/logo/logo_red_white_text.png'])
In my layout when no $logo isset it uses the default one:
<img src="{{ asset($logo or 'img/logo/logo_yellow_white_text.png') }}" alt="">
However this doesn't work. It only works when I remove asset() but then the logo will not be shown when using a prefix (for example app.dev/en/mypage), so I need asset.
What can I do?
Here is the solution:
<img src="{{ asset(isset($logo) ? $logo : 'img/logo/logo_yellow_white_text.png') }}" alt="">
Unfortunetelly you can use or laravel's blade statment only for echoing like this:
{{$logo or 'img/logo/logo_yellow_white_text.png'}}
I would like to check whether an asset {{ asset }} exists before trying to output the file.
I have tried a few things after some google-ing, but none seem to work on Laravel 5.0.
An example of what i would imagine the request (in a frontend blade view) to look like;
#if(asset(path-to-asset))
<img src="image-path"/>
#else
<img src="no-image-path"/>
#endif
Thanks
It would be better to handle this from the webserver, as just because the file exists, doesn't mean it'll be accessible to the public web. Also means you're not repeating code all over the place to check if the file exists see: Replace invalid image url with 404 image
However this can be done PHP wise
#if (file_exists(public_path('path/to/asset.png')))
<img src="{{ asset('path/to/asset.png') }}">
#else
<img src="{{ asset('path/to/missing.png') }}">
#endif
Well aside from using native php methods here
You could use:
if (File::exists($myfile)){ ... }
However, you should note that asset(...) will return an absolute URL to the asset, but you need to check its existence on the file system, so you'll need a path like:
$img = path('public').'/path/to/image.png';
Try this way:
For Laravel:
<?php
$image = parse_url($user->image);
if(isset($image['host'])){
$image= $user->image;
}
else if($image==null){
$image= Request::root().'/uploads'.'/subsystems_icons/'.'democp.jpg';
}
else {
$image= Request::root().'/uploads/'.$user->image;
}
?>
<div class="">
<img class="image" style="width: 100%; height: 300px; object-fit: contain ;"
src="{{$image}}">
</div>
My image file path is public/img/stuvi-logo.png and
my app.blade.php file path is resources/views/app.blade.php
Inside of my app.blade.php file I use {{HTML::image('/img/stuvi-logo.png')}}
to display an image.
I don't understand why this won't find the image.
What is the root folder of the image() method?
If you use bootstrap, you might use this -
<img src="{{URL::asset('/image/propic.png')}}" alt="profile Pic" height="200" width="200">
note: inside public folder create a new folder named image then put your images there. Using URL::asset() you can directly access to the public folder.
Change /img/stuvi-logo.png to img/stuvi-logo.png
{{ HTML::image('img/stuvi-logo.png', 'alt text', array('class' => 'css-class')) }}
Which produces the following HTML.
<img src="http://your.url/img/stuvi-logo.png" class="css-class" alt="alt text">
Update After Laravel 5 this package has been deprecated and maintained as a separate external package. in order to work need to add this composer require laravelcollective/html. more details https://laravelcollective.com/
as of now, you can use
<img src="{{ asset('images/foo.png') }}" alt="tag">
In Laravel 5.x you can use laravelcollective/html and the syntax:
{!! Html::image('img/logo.png') !!}
It will look for an image inside of a public/storage folder where you can define your own image folder
<img src="{{ Storage::url($post->image->path) }}" alt="">
Always try to dump what you are looking for first and than pass it to a url method.
Also, you can create your own url() method inside your Image model if you have some
public function url()
{
return Storage::url($this->path);
}
Then in your blade template you can use this method as follows:
<img src="{{ $post->image->url() }}" alt="">
Had the same problem with laravel 5.3...
This is how I did it and very easy.
for example logo in the blade page view
****<image img src="/img/logo.png" alt="Logo"></image>****
In Laravel 5.x, you can also do like this .
<img class="img-responsive" src="{{URL::to('/')}}/img/stuvi-logo.png" alt=""/>
you can Using asset() you can directly access to the image folder.
<img src="{{asset('img/stuvi-logo.png')}}" alt="logo" class="img-size-50 mr-3 img-circle">
in my case this worked perfectly
<img style="border-radius: 50%;height: 50px;width: 80px;" src="<?php echo asset("storage/TeacherImages/{$studydata->teacher->profilePic}")?>">
this code is used to display image from folder
Assuming the file you want to display is public try adding the variable in your Mail builder function.
public function toMail($notifiable)
{
$img_url = env('APP_URL')."/img/stuvi-logo.png";
return (new MailMessage)
->subject('Test')
->markdown('vendor.mail.markdown.message', [
'data' => $this->data,
'img_url'=>$img_url
]);
}
And then use your 'img_url' variable set in the array in your email blade file.
< img src={{img_url}} alt="Logo" height="50"/>
This worked for me on Laravel 8.xx.
i have a question related to Laravel 4 Starter Site
The following is one of the view page.
#extends('site.layouts.default')
{{-- Web site Title --}}
#section('title')
{{{ Lang::get('site.contact_us') }}} ::
#stop
{{-- Content --}}
#section('content')
{{{ Lang::get('site.contact_us') }}}
#stop
In the site.layouts.default template, Jquery is included. How could i include other javascript like
{{ HTML::script('http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js') }}
into the view file? It should included after the jquery library.
Thanks in advance!
You may use:
#section('scripts')
{{ HTML::script('...') }}
#stop
Anywhere in your view after #extends('...'). Because there is #yield('scripts') in the bottom of the layout, right after the scripts (jQuery and BootStrap).
This is another example:
{{-- Scripts --}}
#section('scripts')
<script type="text/javascript">
$(document).ready(function() {
//...
});
</script>
#stop