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'}}
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) }}">
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>
I store image in public folder now i want to display the image i give the path but image not show any one help me whats the wrong in my code
My image complete path is public/admin/product
<img src="public/admin/product/<?php echo $productr['image']; ?>" height="30px" width="30px">
First thing, you should not store those images inside public directory. Instead you should use Storage directory. Please have a look to the Laravel documentation:
https://laravel.com/docs/5.3/structure#the-storage-directory
So, upload such images inside "storage/app/public"
Then fire below artisan command to create symbolic link:
php artisan storage:link
And then create a link to that image:
<img src="{{ echo asset('storage/file.png') }}" height="30px" width="30px">
Laravel view files blade.php supports {{}} tags to display values.
{{ $valueToBeDisplayed }}
In your case, you can do like
<img src="/admin/product/{{ $product['image'] }}" height="30px" width="30px" />
Assuming image name is abc.png.
Make sure you have that image in folder public/admin/product/abc.png
remove public from your path.., also, you might have typos on the variable $productr, (did you mean $product?) try
<img src="admin/product/<?php echo $product['image']; ?>" height="30px" width="30px">
or, using blade standard:
<img src="admin/product/{{ $product['image']; }}" height="30px" width="30px">
#if ($productr['image'])
<img src="{{ asset('images/profile/'.$productr['image']) }}" alt="{{ $category->user->image }}">
#else
<img src="{{ asset('assets/dist/img/default-150x150.png') }}" >
#endif
<img src="{{storage/app/images/.($employee -> image)}}" width="50px">
"storage/app/images/" is the folder path to where your images are stored.
hope this will help
{{ asset('public/imagepath/image_name') }}
I have image name in the database and image upload in public/image folder.
Now I want to show the image on the web page.
How do I do this?
I am using
<img src="{{ URL::to('/') }}/images/{{ $item->Photo }}" alt="{{ $item->Title }}"/>
You can use the asset() helper function, like so:
<img src="{{ asset("images/$item->Photo") }}" alt="{{ $item->Title }}" >
You could use <img src="{{ asset('/image') }}" />
Easiest way would be to add a method to your user model.
That method will return the url of your image, you will name that method getImageUrl() for example.
your function :
public function getImageUrl(){
return asset($this->image);
}
That way you just have to do something like this in your view
<img src="{{ $user->getImageUrl() }}" />
Then if at some point you change the storage location of your pictures you just have to change it in the getImageUrl function.
{{HTML::image("images/$item->YourDBFieldNameOfImageURL", "ALT description", "");}}
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.