[SOLVED] LiipImagineBundle Picture does not appear after filtering

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