the image doesn't appeare on the web page

Question

i use vich uploader bundle to display images added to my data base

here is my code

config.yml :

vich_uploader:
    db_driver: orm
    mappings:
        cours_image:
            uri_prefix:         /images/cours
            upload_destination: '%kernel.root_dir%/../web/images/cours'
            
            inject_on_load:     true
            delete_on_update:   false
            delete_on_remove:   true
            namer:   vich_uploader.namer_origname

the entity

<?php

namespace DataBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;
use Vich\UploaderBundle\Mapping\Annotation as Vich;
use Symfony\Component\HttpFoundation\File\File;
/**
 * CoursCode
 *
 * @ORM\Table(name="cours_code")
 * @ORM\Entity
 * @Vich\Uploadable
 */
class CoursCode
{
    /**
     * @var integer
     *
     * @ORM\Column(name="id_cours", type="integer", nullable=false)
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="IDENTITY")
     */
    private $idCours;

    /**
     * @var string
     *
     * @ORM\Column(name="titre_cours", type="string", length=50, nullable=false)
     */
    private $titreCours;

    /**
     * @var string
     *
     * @ORM\Column(name="contenu_cours", type="text", length=65535, nullable=false)
     */
    private $contenuCours;



    /**
     * NOTE: This is not a mapped field of entity metadata, just a simple property.
     *
     * @Vich\UploadableField(mapping="cours_image", fileNameProperty="imageName", size="imageSize")
     * @Assert\File(maxSize="1200k",mimeTypes={"image/png", "image/jpeg", "image/pjpeg"})
     *
     * @var File
     */
    private $imageFile;

    /**
     * @ORM\Column(type="string", length=255)
     *
     * @var string
     */
    private $imageName;

    /**
     * @ORM\Column(type="integer", nullable=true)
     *
     * @var integer
     */
    private $imageSize;

    /**
     * @ORM\Column(type="datetime")
     *
     * @var \DateTime
     */
    private $updatedAt;

    /**
     * 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 CoursCode
     */
    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 CoursCode
     */
    public function setImageName($imageName)
    {
        $this->imageName = $imageName;

        return $this;
    }

    /**
     * @return string|null
     */
    public function getImageName()
    {
        return $this->imageName;
    }

    /**
     * @param integer $imageSize
     *
     * @return CoursCode
     */
    public function setImageSize($imageSize)
    {
        $this->imagesize = $imageSize;

        return $this;
    }

    /**
     * @return integer|null
     */
    public function getImageSize()
    {
        return $this->imageSize;
    }

    /**
     * @return int
     */
    public function getIdCours()
    {
        return $this->idCours;
    }

    /**
     * @param int $idCours
     */
    public function setIdCours($idCours)
    {
        $this->idCours = $idCours;
    }

    /**
     * @return string
     */
    public function getTitreCours()
    {
        return $this->titreCours;
    }

    /**
     * @param string $titreCours
     */
    public function setTitreCours($titreCours)
    {
        $this->titreCours = $titreCours;
    }

    /**
     * @return string
     */
    public function getContenuCours()
    {
        return $this->contenuCours;
    }

    /**
     * @param string $contenuCours
     */
    public function setContenuCours($contenuCours)
    {
        $this->contenuCours = $contenuCours;
    }





}

the twig:

{% for c in cours  %}
                    <div class="col-md-6 col-sm-12">

                        <article class="cp-taxi-holder cp-deals-holder">
                            <figure class="cp-thumb">

                                 <img src=" {{ vich_uploader_asset(c, 'imageFile') }}" />

                            </figure>
                            <div class="cp-text">
                                <h3>   {{ c.titreCours}}</h3>
                                <ul class="cp-meta-listed">
                                    <li>Niveau de difficulté <span>moyen</span></li>

                                </ul>
                                <a href="#" class="cp-btn-style1">Voir les lessons</a>
                            </div>
                        </article>
                    </div>
                    {% endfor %} }}

the controller :

 public function AfficheCoursFrontAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();


        $cours = $em->getRepository('DataBundle:CoursCode')->findAll();


        /**
         * @var $paginator \knp\Component\Pager\paginator
         */
        $paginator  = $this->get('knp_paginator');

        $result = $paginator->paginate(
            $cours,
            $request->query->getInt('page',1) /*page number*/,
            $request->query->getInt('limit',4) /*limit per page*/

        );

the form:

class AjoutCoursType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder

        ->add('titreCours')
        ->add('contenuCours')

        ->add('imageFile', VichImageType::class, [
            'required' => false,])
        ->add('Ajout',SubmitType::class)




    ;
}



public function configureOptions(OptionsResolver $resolver)
{

    $resolver->setDefaults(array(
        'data_class' => 'DataBundle\Entity\CoursCode'
    ));
}

symfony is reading the file but doesn't show it i can't find the problem

You need to your form enctype="multipart/form-data" as referenced here (bottom answer) However I don't actually know where to put that parameter when rendering forms in twig from FormType classes — Giedrius Lukošiūnas

Erwan Haquet Erwan Haquet · Accepted Answer · 2017-04-03T17:08:33

The first thing you should do is to inspect your html render and search for the image, then check if src is correct. If the link is correct it's probably a permission error and you should look at the permissions applied to the upload folder web/images/cours.

the image doesn't appeare on the web page

1 Answers