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

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 :wink:

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="#">
        <img src="./img/portafolio-1.png" alt="...">
          Slide 1


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

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) {


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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.