LiipImagineBundle Picture does not appear after filtering - file-upload

Question

I'm using the VichUploadBundle to upload images into my database, and would like to have the thumbnails of the images displayed on the website with LiipImage.
This is my config.yml with the files set up
//.....
vich_uploader:
db_driver: orm
twig: true
mappings:
product_image:
uri_prefix: /images/products
upload_destination: '%kernel.root_dir%/../web/images/products'
inject_on_load: false
delete_on_update: true
delete_on_remove: true
liip_imagine:
# configure resolvers
resolvers:
# setup the default resolver
default:
# use the default web path
web_path: ~
# your filter sets are defined here
filter_sets:
# use the default cache configuration
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, 98], position: center, color: '#000000' }
Most of the code for liip is copied straight up from the documentation for testing.
This is my routing.yml
app:
resource: "#AppBundle/Controller/"
type: annotation
_liip_imagine:
resource: "#LiipImagineBundle/Resources/config/routing.xml
Finally I have the Image entity I want to upload.
It's as well a code copied from the official Vich documentation
<?php
namespace AppBundle\Entity;
use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\HttpFoundation\File\File;
use Vich\UploaderBundle\Mapping\Annotation as Vich;
/**
* #ORM\Entity
* #Vich\Uploadable
*/
class Image
{
/**
* #ORM\Id
* #ORM\Column(type="integer")
* #ORM\GeneratedValue(strategy="AUTO")
*/
protected $id;
// ..... other fields
/**
* NOTE: This is not a mapped field of entity metadata, just a simple property.
*
* #Vich\UploadableField(mapping="product_image", fileNameProperty="imageName")
*
* #var File
*/
protected $imageFile;
/**
* #ORM\Column(type="string", length=255)
*
* #var string
*/
protected $imageName;
/**
* #ORM\Column(type="string", length=100)
*
* #var string
*/
protected $imageTitle = null;
/**
* #ORM\Column(type="string", length=100)
*
* #var string
*/
protected $imageAuthor = null;
/**
* If manually uploading a file (i.e. not using Symfony Form) ensure an instance
* of 'UploadedFile' is injected into this setter to trigger the update. If this
* bundle's configuration parameter 'inject_on_load' is set to 'true' this setter
* must be able to accept an instance of 'File' as the bundle will inject one here
* during Doctrine hydration.
*
* #param File|\Symfony\Component\HttpFoundation\File\UploadedFile $image
*
* #return Product
*/
public function setImageFile(File $image = null)
{
$this->imageFile = $image;
if ($image) {
// It is required that at least one field changes if you are using doctrine
// otherwise the event listeners won't be called and the file is lost
$this->updatedAt = new \DateTimeImmutable();
}
return $this;
}
/**
* #return File|null
*/
public function getImageFile()
{
return $this->imageFile;
}
/**
* #param string $imageName
*
* #return Product
*/
public function setImageName($imageName)
{
$this->imageName = $imageName;
return $this;
}
/**
* #return string|null
*/
public function getImageName()
{
return $this->imageName;
}
/**
* #ORM\Column(type="datetime")
*
* #var \DateTime
*/
protected $updatedAt;
/**
* #return null
*/
public function getImageTitle()
{
return $this->imageTitle;
}
/**
* #param null $imageTitle
*/
public function setImageTitle($imageTitle)
{
$this->imageTitle = $imageTitle;
}
/**
* #return null
*/
public function getImageAuthor()
{
return $this->imageAuthor;
}
/**
* #param null $imageAuthor
*/
public function setImageAuthor($imageAuthor)
{
$this->imageAuthor = $imageAuthor;
}
}
In my controller I have the image table put into array with $em
$em = $this->getDoctrine()->getManager();
$list = $em->getRepository(Image::class)->findAll();
Which I later put into the view and (would want to) print them like so:
{% for l in list %}
<tr>
<td>
<img src="{{ asset('/images/products/'~l.imageName) | imagine_filter('my_thumb') }}" alt="{{ l.imageName }}">
</td>
<td>{{ l.imageTitle }}</td>
<td>{{ l.imageAuthor }}</td>
</tr>
{% endfor %}
Unfortunately the output looks like this:
Now the path is fine. The image works well without the imagine_filter(). Same effect would occur when using the Vich Assets.
When checked the path the image is linked under is:
http://localhost:8000/media/cache/resolve/my_thumb/images/products/hqdefault.jpg
The path to images is
web/images/products
Is there anyone who know what might be the issue?
Or to provide an alternative bundle for creating image thumbnails
All help would be amazing

Answer 1

FIXED: Enabling GD and filenames in php.ini and restating apache, afterwards clearing the cache fixed everything