the image doesn't appeare on the web page - symfony

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>
Voir les lessons
</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

Answer 1

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.