Image Path in WordPress Javascript File

Hello,

I’m building a blog website and I would like to give a path to changeable images in js. Normally, If I would create a path in PHP It would seem like this.

/img/instance.jpg” alt=”instance-picture”>

I’ve been searching on how to create a path for images in js with WordPress but nothing I came up with.

document.addEventListener("DOMContentLoaded", () => {
    new Glide(".glide", {
        type: "carousel",
        startAt: 0,
        animationTimingFunc: "ease-in-out",
        gap: 100,
        perView: 3
    }).mount();

    let prevBtn = document.getElementById("prev");
    let nextBtn = document.getElementById("next");

    let background = document.querySelector(".wallpaper");
    let indices = document.querySelectorAll(".index");

    let bgImgs = ["dolmabahce.jpg", "cappadocia.jpg", "cami-1.jpg", "efes.jpg"];

    let currentIndex = 0;

    indices.forEach(index => index.classList.remove("active"));
    indices[currentIndex].classList.add("active");

    var myAnimation = new hoverEffect({
        parent: document.querySelector(".wallpaper"),
        intensity: 0.3,
        imagesRatio: 1080 / 1920,
        image1: <code>/img/${bgImgs[0]}</code>,
        image2: <code>/img/${bgImgs[1]}</code>,
        displacementImage: "img/14.jpg",
        hover: false
    });

    var myAnimation2 = new hoverEffect({
        parent: document.querySelector(".wallpaper"),
        intensity: 0.3,
        imagesRatio: 1080 / 1920,
        image1: <code>/img/${bgImgs[1]}</code>,
        image2: <code>/img/${bgImgs[2]}</code>,
        displacementImage: "img/14.jpg",
        hover: false
    });

    var myAnimation3 = new hoverEffect({
        parent: document.querySelector(".wallpaper"),
        intensity: 0.3,
        imagesRatio: 1080 / 1920,
        image1: <code>/img/${bgImgs[2]}</code>,
        image2: <code>/img/${bgImgs[3]}</code>,
        displacementImage: "img/14.jpg",
        hover: false
    });

    var myAnimation4 = new hoverEffect({
        parent: document.querySelector(".wallpaper"),
        intensity: 0.3,
        imagesRatio: 1080 / 1920,
        image1: <code>/img/${bgImgs[3]}</code>,
        image2: <code>/img/${bgImgs[0]}</code>,
        displacementImage: "img/14.jpg",
        hover: false
    });

    let distortAnimations = [
        myAnimation,
        myAnimation2,
        myAnimation3,
        myAnimation4
    ];

    function startNextDistortAnimation() {
        let prevIndex = currentIndex;
        currentIndex = (currentIndex + 1) % 4;
        indices.forEach(index => index.classList.remove("active"));
        indices[currentIndex].classList.add("active");
        distortAnimations[prevIndex].next();
        showTextAnimation("next");
        setTimeout(() => {
            let canvas = background.querySelectorAll("canvas");
            background.appendChild(canvas[0]);
            distortAnimations[prevIndex].previous();
        }, 1200);
    }

    function startPrevDistortAnimation() {
        currentIndex = currentIndex - 1 < 0 ? 3 : currentIndex - 1;
        indices.forEach(index => index.classList.remove("active"));
        indices[currentIndex].classList.add("active");
        distortAnimations[currentIndex].next();
        showTextAnimation("prev");
        setTimeout(() => {
            let canvas = background.querySelectorAll("canvas");
            background.insertBefore(canvas[canvas.length - 1], background.firstChild);
            distortAnimations[currentIndex].previous();
        }, 500);
    }

    nextBtn.addEventListener("click", () => {
        startNextDistortAnimation();
    });

    prevBtn.addEventListener("click", () => {
        startPrevDistortAnimation();
    });

});

However, my path looks like this. “http://bacasizsanayi.localhost/blog/img/instance.jpg”

As I think, It should look like this.
http://bacasizsanayi.localhost/wp-content/themes/bacasizsanayi/img/ill.jpg”

I would appreciate anybody tells me how to create a path in WordPress javascript files.

Thanks in advance,