In my Symfony 6.2 i upload images to non public directory in my symfony /var/card-upload. In twig i display this image with
<img class="img-fluid img-thumbnail" src="{{ path('serve_private_image', {'id': card.id}) }}" alt="">
and for server image I have controller
<?php
namespace App\Controller;
use App\Entity\Card;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use Symfony\Component\Routing\Annotation\Route;
class ServePrivateImageController extends AbstractController
{
/**
* Returns a private image for card file for display.
*
* @Route("/serve-private-image/{id}", name="serve_private_image", methods="GET")
* @param Card $card
* @return BinaryFileResponse
*/
#[Route(path: '/serve-private-image/{id}', name: 'serve_private_image')]
public function privateImageServe(Card $card): BinaryFileResponse
{
return $this->fileServe($card->getImage());
}
/**
* Returns a private file for display.
*
* @param string $path
* @return BinaryFileResponse
*/
private function fileServe(string $path): BinaryFileResponse
{
$absolutePath = $this->getParameter('card_directory') . '/' . $path;
return new BinaryFileResponse($absolutePath);
}
}
now I install liip image bundle for resize images for display
<img class="img-fluid img-thumbnail" src="{{ path('serve_private_image', {'id': card.id}) | imagine_filter('my_thumb') }}" alt="">
but this dont dispaly image
liip imagine config is
# Documentation on how to configure the bundle can be found at: https://symfony.com/doc/current/bundles/LiipImagineBundle/basic-usage.html
liip_imagine:
# valid drivers options include "gd" or "gmagick" or "imagick"
driver: "gd"
filter_sets:
cache: ~
# the name of the "filter set"
my_thumb:
# adjust the image quality to 75%
quality: 75
# list of transformations to apply (the "filters")
filters:
# create a thumbnail: set size to 120x90 and use the "outbound" mode
# to crop the image when the size ratio of the input differs
thumbnail: { size: [ 120, 90 ], mode: outbound }
# create a 2px black border: center the thumbnail on a black background
# 4px larger to create a 2px border around the final image
background: { size: [ 124, 94 ], position: center, color: '#000000' }