title: Image URL is not resolving correctly when viewed in controller template
body: <p>I have the following Symfony 5 based PHP web application structure:</p>
  <pre><code>.
  ├── LICENSE
  ├── bin
  ├── composer.json
  ├── composer.lock
  ├── config
  ├── migrations
  ├── phpunit.xml.dist
  ├── public
  │   ├── images
  │   │   ├── 3e28ae7b9f72cb1958e532161709f559.jpg
  │   │   ├── f16b8e3277415e2783d076177aee8f7e.jpg
  │   │   └── fe0920ac3d2b89f1cd4d787cedc3daf4.jpg
  │   └── index.php
  ├── src
  │   ├── Controller
  │   │   └── CatController.php
  ├── symfony.lock
  ├── templates
  ├── tests
  ├── translations
  ├── var
  └── vendor
  </code></pre>
  <p><code>CatController.php</code>:</p>
  <pre><code>&lt;?php
  
  namespace App\Controller;
  
  use App\Entity\Cat;
  use App\Repository\CatRepository;
  use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
  use Symfony\Component\HttpFoundation\Request;
  use Symfony\Component\HttpFoundation\Response;
  use Symfony\Component\Routing\Annotation\Route;
  
  /**
   * @Route(&quot;/cat&quot;)
   */
  class CatController extends AbstractController
  {
      /**
       * @Route(&quot;/{id}&quot;, name=&quot;cat_show&quot;, methods={&quot;GET&quot;})
       */
      public function show(Cat $cat): Response
      {
          return $this-&gt;render('cat/show.html.twig', [
              'cat' =&gt; $cat,
          ]);
      }
  }
  </code></pre>
  <p><code>Cat.php</code> (Entity):</p>
  <pre><code>&lt;?php
  
  namespace App\Entity;
  
  use App\Repository\CatRepository;
  use Doctrine\ORM\Mapping as ORM;
  
  /**
   * @ORM\Entity(repositoryClass=CatRepository::class)
   */
  class Cat
  {
      /**
       * @ORM\Id()
       * @ORM\GeneratedValue()
       * @ORM\Column(type=&quot;integer&quot;)
       */
      private $id;
  
      /**
       * @ORM\Column(type=&quot;string&quot;, length=255)
       */
      private $image;
  
      public function getId(): ?int
      {
          return $this-&gt;id;
      }
  
      public function getImage(): ?string
      {
          return $this-&gt;image;
      }
  
      public function setImage(string $image): self
      {
          $this-&gt;image = $image;
  
          return $this;
      }
  }
  </code></pre>
  <p><code>cat/show.html.twig</code>:</p>
  <pre><code>{{ cat.image }}
  
  &lt;img src=&quot;{{ cat.image }}&quot;/ &gt;
  </code></pre>
  <p>This template produces HTML, which looks correct:</p>
  <pre><code>images/3e28ae7b9f72cb1958e532161709f559.jpg
      
  &lt;img src=&quot;images/3e28ae7b9f72cb1958e532161709f559.jpg&quot;&gt;
  </code></pre>
  <p>But the image does not actually render, and when I right click on where the image should be and select 'Open in new tab'.</p>
  <p>A new tab opens and the URL is set to:</p>
  <p>http://localhost:8000/cat/images/3e28ae7b9f72cb1958e532161709f559.jpg</p>
  <p>Is there a way to prevent <code>/cat</code> prefix on the rendered URL? Which is preventing the image url from resolving correctly.</p>