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.
Related
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 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 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", "");}}
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>