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')}}">
Related
I am trying to display a row from my database by id, the data displayed successfully but the image doesn't show (showing a broken link icon).
Here is the index.blade.php where the href to the row:
<a href="singlepost/{{$products->id}}">
<img src="storage/{{$templates->image_path2}}">
The route:
Route::get('/singlepost/{id}', 'App\http\controllers\TemplatesController#getPostById')->name('single.post');
The function getPostById
public function getPostById($id){
$products = DB::table('templates')->where('id', $id)->first();
return view('singlepost', compact('products'));
}
The singlepage.blade.php
<div class="row">
<div class="col-lg-4">
<img src="storage/{{$products->image_path}}">
</div>
<div class="col-lg-7">
<h2>{{$products->name}}</h2>
<p>{{$products->description}}</p>
</div>
</div>
When referencing publically accessible files, you want to do so from the /public/storage directory. Files from the /storage/app/public directory should be mapped from this directory to /public/storage using a symbloic link,
You create the symlink using:
php artisan storage:link
With that done, assets in /storage/app/public can now be accessed as if they existed in /public/storage. Use the asset helper to get your image.
<img src="{{ asset($templates->image_path2) }}" alt="Some alt tag ..." />
The above assumes a relative path of the asset from the /public/storage root, if you had the image in a subdirectory you would need to include that too.
For example, if you had your images in an img subdirectoy:
<img src="{{ asset('/img/' . $templates->image_path2) }}" alt="Some alt tag ..." />
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.
I am new to Laravel and am trying to change the logo in a Laravel application with Jetstream and Inertia.
I have gone over the documentation as well as resources on Laracasts and understand that I need to update the svg (or can use a png/jpg etc by using the html img tag) in the following files:
application-logo.blade.php
authentication-card-logo.blade.php
application-mark.blade.php
The Logo is referenced in AppLayout.vue via a jet-application-mark element:
<div class="flex-shrink-0 flex items-center">
<inertia-link :href="route('dashboard')">
<jet-application-mark class="block h-9 w-auto" />
</inertia-link>
</div>
As well as a jet-application-logo element in the Welcome.vue:
<div>
<jet-application-logo class="block h-12 w-auto" />
</div>
In each of the files listed above I replaced the svg with an html img to a resource:
<img src="{{ asset('images/enhanced-logo.png') }}" />
After changing the files above and rebuilding, the original Jetstream logo remains - the only place that it is working is in login.blade.php, the following code does pull in the image that I want:
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
Any direction as to what I am doing wrong would be appreciated.
To change logo in a Laravel Jetstream application:
The authentication views in a Jetstream application, regardless of the stack are simple blade views common for both stacks. To change the logo for authentication views edit resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
<a href="/">
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</a>
Then depending upon the stack
Inertia stack
Replace the default logo with your own custom logo in
resources/js/Jetstream/ApplicationLogo.vue
resources/js/Jetstream/ApplicationMark.vue
with
<template>
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
</template>
Livewire stack
Replace the default logo with your own custom logo in
resources/views/vendor/jetstream/components/application-logo.blade.php
resources/views/vendor/jetstream/components/application-mark.blade.php
with
//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />
Due to the fact that I am using the Inertia stack, I needed to edit the following files:
resources/js/Jetstream/ApplicationLogo.vue
resources/js/Jetstream/ApplicationMark.vue
With:
<template>
<img src="/images/enhanced-logo.png"/>
</template>
As well as the file:
resources/views/vendor/jetstream/components/authentication-card-logo.blade.php
With:
<img src="{{ asset('images/enhanced-logo.png') }}" />
To replace the existing Jetstream logo with my image.
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 have Below code in my header.html
<div class="col-md-3">
<div class="logo">
</div>
</div>
But it's not showing my png image in header, Is the way adding image path in div is wrong?
<img src="http://example.com/themes/default/images/logo.png">
That is how you use an image. You are placing a link to the image.
Also, you are not seeing anything because your <a></a> tags are empty. If you write something between them, you can click on it, to see the image you linked.
Add Image inside the img tag not in a tag
<img src="http://example.com/themes/default/images/logo.png">
You should do is this way. img tag is used to display image.
Good practice is to link the logo to the home page of the website.
<div class="col-md-3"><div class="logo"><img src="http://example.com/themes/default/images/logo.png" alt="Site Name or Logo"/></div></div>
put link or path in img tag source(src) not anchor tag.
<div class="col-md-3">
<div class="logo">
<img src="http://example.com/themes/default/images/logo.png" alt="">
</div>
</div>