How can I store a string without duplicating it?

There are 2 cards panels, and I would like to change the image of the card when I hover over it, then when I leave it I want to come back to the initial image.

First time it works for each image, but when I try to hover second time it duplicates my string where I store the path..

HTML CODE

<div class="col-lg d-flex justify-content-center mb-4">
                        <div class="card border-0"">
                            <img src="img/slide-1.jpg" class=" card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Image 1</h5>
                            </div>
                        </div>
                    </div>
<div class="col-lg d-flex justify-content-center mb-4">
                        <div class="card border-0"">
                            <img src="img/slide-1.jpg" class=" card-img-top" alt="...">
                            <div class="card-body">
                            <h5 class="card-title">Image 2</h5>
                            </div>
                        </div>
                    </div>

JQUERY CODE

(function ($) {
    "use strict"; // Start of use strict
    var image_product;
    var image_product_path="/Users/paul/Desktop/Site/";
    $(".card-img-top").on({
        mouseenter: function () {
            image_product = $(this).attr("src");
            $(this).attr("src","/Users/paul/Desktop/Site/img/slide-3.jpg");
            
        },
        mouseleave: function () {
            $(this).attr("src",image_product_path+image_product);
        }
    });

  
  })(jQuery); // End of use strict

The error that is triggered second time when I try to hover over the cards:
[Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg

The error that is triggered third time when I try to hover over the cards:
[Error] Not allowed to load local resource: file:///Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site//Users/paul/Desktop/Site/img/slide-1.jpg
AND SO ON

>Solution :

There are n cards panels, and I would like to change the image of the
card when I hover over it, then when I leave it I want to come back to
the initial image.

Set the original image into a data attribute, then on mouse out switch it back.

(function($) {
  $(".card-img-top").on({
    mouseenter: function() {
      $(this).data('original', $(this).attr("src"));
      $(this).attr("src", "https://via.placeholder.com/300/09f/000.png");
    },
    mouseleave: function() {
      $(this).attr("src", $(this).data('original'));
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg d-flex justify-content-center mb-4">
  <div class="card border-0">
    <img src="https://via.placeholder.com/300/09f/fff.png" class=" card-img-top " alt="... ">
    <div class="card-body ">
      <h5 class="card-title ">Image 1</h5>
    </div>
  </div>
</div>

If you want a different image for each different card then set it into a data attribute.

(function($) {
  $(".card-img-top").on({
    mouseenter: function() {
      $(this).data('original', $(this).attr("src"));
      $(this).attr("src", $(this).data('hover-image'));
    },
    mouseleave: function() {
      $(this).attr("src", $(this).data('original'));
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg d-flex justify-content-center mb-4">
  <div class="card border-0">
    <img src="https://via.placeholder.com/100/09f/fff.png" data-hover-image="https://via.placeholder.com/100/09f/000.png" class=" card-img-top " alt="... ">
    <div class="card-body ">
      <h5 class="card-title ">Image 1</h5>
    </div>
  </div>
</div>

<div class="col-lg d-flex justify-content-center mb-4">
  <div class="card border-0">
    <img src="https://via.placeholder.com/100/07f/aaa.png" data-hover-image="https://via.placeholder.com/100/05f/333.png" class=" card-img-top " alt="... ">
    <div class="card-body ">
      <h5 class="card-title ">Image 2</h5>
    </div>
  </div>
</div>