How can I display an icon depending on file type in the view Using Laravel 7?

Question

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.

Answer 1

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.

Answer 2

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