I´m traying chenge logo in notification email with laravel 8.
first i published all theme:
php artisan vendor:publish --tag=laravel-notifications
php artisan vendor:publish --tag=laravel-mail
and in header.blade into folder mail/html i´m doing this:
<img src="{{ asset('img/image_default.png') }}" class="logo" alt="Laravel Logo">
my image it´s in public/img
and i´m sending my email ok, but in gmail my logo img it´s broken. I´m using a vhost in localhost
in my email, img route it´s:
googleURLhttp://laravellimpio/img/image_default.png
i checked my asset in other blade and i can show my img ok. I don´t know if i have a problem with my code or it´s for used localhost.
Thanks for help me
Try this
<tr>
<td class="header">
<a href="{{ $url }}" style="display: inline-block;">
#if (trim($slot) === 'Laravel')
<img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Logo">
#else
<img src="{{ asset('img/image_default.png') }}" class="logo" alt="My logo">
#endif
</a>
</td>
</tr>
As you can see there is a conditional statement checking if the app name is equal to Laravel, change the name of your app from the env file and then remove the {{ $slot }} and use your own path. You need to change the app name so that it skips the first portion of the statement and selects the space between the #else.
Related
I'm working on order module in Laravel 8.The issue I'm facing with my product image path.
Here is screen shot of my issue:
When I remove these brackets from image path it works OK:
Blade file code:
<h4>My Cart</h4>
#foreach($mem as $t)
<div class="top-cart-item">
<div class="top-cart-item-image">
<img src="{{URL::TO('')}}/storage/app/{{$t->proimage}}"> </div>
</div>
#endforeach
Change your image tag from
<img src="{{URL::TO('')}}/storage/app/{{$t->proimage}}">
to this
<img src="{{asset('/storage/app/$t->proimage')}}">
I´m trying to add img into Blade email in Laravel. But when I receive my email, I can´t see my image, but URL is correct. I´m trying to add img this way:
<img src="{{ asset('/public/images/guiapaladar-qrcode.png') }}" alt="" style="width: 20%;">
In Google Console I can see this:
<img src="https://ci5.googleusercontent.com/proxy/-Ay7pcevYLhUaAu4iicFdd-kGPKGB9hXRemwYYmoes8GnA4nN6Qe_FZDKenf_iDgiNpx5Xb1QX7p_2Su5DCOHAb2-UI8gGHkJhK9V6qb4R-B6_QY=s0-d-e1-ft#http://127.0.0.1/guiaPaladar/public/images/guiapaladar-qrcode.png" alt="" style="width:20%" class="CToWUd">
but in my email it doesn't show my image.
Thanks for help me
If you are sending email through localhost then image will not be displayed. But if you are sending it live then use the following code:
<img src="{{asset('images/guiapaladar-qrcode.png')}}" alt="" style="width: 20%;">
With using markdown you can just :
![Random text][logo]
[logo]: {{asset('/images/image.png')}} "Logo"
Or simply :
<img src="data:image/png;base64,{{base64_encode(file_get_contents(resource_path('images/image.png')))}}" alt="">
Hello and thank you for taking the time to help me with my question. I have a task application which is working great. When you upload images, you can see their thumbnails and even click on them and be directed to a new tab to view the images at 100%. The problem is that when a client uploads a pdf, the icon shows up as a broken image icon. This makes sense as the img tag within the a tag obviously is an image icon.
My question is how can I indicate in my show.blade.php that it is an image when it is an image and a pdf or dox when it is a pdf or doc? Like I said, the app is working so the only code I am concerned with is the following (unless I am mistaken, please let me know):
...
<a data-toggle="" href="/storage/upload/{{ $images[$i]['name'] }}" target="_blank">
<img src="/storage/upload/{{ $images[$i]['name'] }}" class="image-fluid w-50">
</a>
</div>
#endfor
#else
<p class="ml-3 mb-1">No files found</p>
#endif
</div>
I am looking for something like a conditional that says: If img, display the thumb, if not, display an icon that represents "file".
Any help on this would be greatly appreciated. Thank you in advance.
You can simply use a free API to achieve this without writing any code. Use the below link to get your icon as per the extension.
<img src="https://pro.alchemdigital.com/api/extension-image/pdf">
For futher info read this article: Read this Article
To get this to work I changed my above code to the following:
#if (in_array($extension = pathinfo($images[$i]['name'], PATHINFO_EXTENSION), ['jpg', 'png', 'bmp']))
<a data-toggle="" href="/storage/upload/{{ $images[$i]['name'] }}" target="_blank">
<img src="/storage/upload/{{ $images[$i]['name'] }}" class="image-fluid w-50">
</a>
#else
<a data-toggle="" href="/storage/upload/{{ $images[$i]['name'] }}" target="_blank">
<img src="{{ "/icons/{$extension}.jpg" }}" class="image-fluid w-50">
</a>
#endif
</div>
#endfor
#else
<p class="ml-3 mb-1">No images found</p>
#endif
</div>
I then added an icons folder and populated it with the icon images in jpg format. I hope this helps anyone else with the same issue.
I am trying to show stored images in img element. I have saved an image by using a Laravel built-in function.
$path = $request->file('image')->store('avatars');
According to the above script, the images are saving to:
Storage > app > avatars
I also tried saving them here:
Storage > app > public > avatars
Afterward, I used the Artisan command: php artisan storage:link
And then in the front end:
<img src="{{ url('storage/'.$Product->image) }}" width="30" height="30"/>
<img src="{{ asset('storage/'.$Product->image) }}" width="30" height="30"/>
<img src="{{ asset($Product->image) }}" width="30" height="30"/>
<img src="{{ asset('public/storage/'.$Product->image) }}" width="30" height="30"/>
However, the image is still not displayed. Can someone kindly let me know where I'm wrong so that I can fix it? I would appreciate that.
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">