How to pass a base url via fetch api for an image inside a template

[Snippet]

Current problem is that images inside “portafolio-desktop-slider.php” are not relative to the url/path of the website, which means they won’t work on local host and for production.

fetch('<?php bloginfo('template_url'); ?>/portafolio-desktop-slider.php')
          .then(response => response.text())          
          .then( resultText => document.getElementById('example').innerHTML = resultText );

Do note this code is based upon suggestion here

and here’s the code inside “portafolio-desktop-slider.php” which is where the image is path is not complete.

<div id="sliderportafolio">
<div class="carousel">
    <slide :index="0">
      <a class="link-slider" href="#">
      <figure>
        <img src="./img/portafolio-1.png" alt="...">
        <figcaption>
          Slide 1

        </figcaption>
      </figure>
      </a>
    </slide>

Using the <?php bloginfo('template_url'); ?> function doesn’t work.

[Snippet]

So I guess I should create a variable with the php value but how do I output it on the template more or less? Thats where I am lost… some guidance is very appreciated.
Something like this perhaps?

var url = '/your/url';
var formData = new FormData();
formData.append('x', 'hello');

fetch(url, { method: 'POST', body: formData })
.then(function (response) {
  return response.text();
})
.then(function (body) {
  console.log(body);
});

source: https://stackoverflow.com/a/34682761

[Snippet]

Edit: my mistake I have to use : wp_localize_script() | Function | WordPress Developer Resources