null error for src image when passing data from one page to another page

Question

Hi i been trying to build checkout page that have details of cart,and I have error that says something like null i think thats problem because of src of image and I see that it show default image instead of my image

sproduct6.html:

<script>
  function passvalues() {
    // Title
    var name = document.getElementById("title").textContent;
    // Price
    var price = document.getElementById("price").textContent;
    // Licence
    var licence = document.getElementById("select").value;
    // Image
    var image = document.getElementById('product-image').src;
    // Total
    var total = document.getElementById("total").textContent;
    // Img source
    var imageSrc = document.getElementById('product-image').getAttribute('src');
    // Value
    var textvalue = [name, imageSrc, price, licence, total].join(" | ");
    localStorage.setItem("textvalue", textvalue);
    var imgvalue = document.getElementById('product-image').outerHTML;
    localStorage.setItem("imgvalue", imgvalue);

    // Call updatetotal function to update the total price in the cart
    updatetotal();

    // Change the image source to local storage value
    document.getElementById("product-image").setAttribute("src", imageSrc);

    return false;
  }

  function updatetotal() {
    var textvalue = localStorage.getItem("textvalue");
    var total = parseFloat(textvalue.split(" | ")[1].replace('$', ''));
    document.getElementById('total').textContent = '$' + total.toFixed(2);
  }

</script>
<section id="prodetails" class="section-p1">
  <div class="productcontainer" id="enjoy">
    <div class="single-pro-image">
      <img src="../data/high.png" width="100%" id="product-image" class="product-img">
    </div>

    <div class="single-pro-details" action="C:\s\starter-ruby\client\checkout.html">
      <h4 class="product-title" id="title">Enjoy</h4>
      <h2 id="price" class="price">$20</h2>
      <select id="select" class="licence">
        <option>Select Licence</option>
        <option>MP3</option>
        <option>Tagged Wav</option>
        <option>Un-Tagged Wav</option>
        <option>Stems</option>
        <option>Exlusive</option>
      </select>

      <script>
        let select = document.getElementById('select');
        let price = document.getElementById('price');

        // Prices
        let prices = {
          "Select Licence": '$20',
          "MP3": '$20',
          "Tagged Wav": '$27',
          "Un-Tagged Wav": '$30',
          "Stems": '$120',
          "Exlusive": '$300'
        }

        // When the value of select changes, this event listener fires and changes the text content of price to the coresponding value from the prices object
        select.addEventListener('change', () => {
          price.textContent = prices[select.value];
        });
      </script>
      <button class="add-cart">Add To Cart <i class='bx bx-cart-add add-cart'></i></button>
      <h4>Product Details</h4>
      <span>Lil Tjay x Trap Type Beat - "Enjoy" in key D# Minor and 160 BPM,It has vibe of Lil Tjay , Pop Smoke and more
        , Prices are great for this type of beat;Tagged Mastered MP3 for $25,$27 for Tagged Unmastered Wav,$30 for
        Untagged unmastered Wav,$70 for Stems and $120 for Exlusive</span>
    </div>
    <div id="audio">
      <audio controls style="width:100%;" id="audio-clip">
        <source src="Audio/Enjoy 160 x D sharp minor.mp3" type="audio/mp3">
      </audio>
    </div>
</section>

checkout.html: (should display image)

<div class="product-details">
  <h3>Product Image: <img id="image"></h3>
  <h3>Product Title: <span id="name"></span></h3>
  <h3>Product Price: <span id="price"></span></h3>
  <h3>Product licence: <span id="licence"></span></h3>
  <h3>Product Audio: <br><span id="audio"></span></h3>
</div>
<!-- as much products that much is div.product-details-->
</div>
<!--TOTAL-->
<h3>Total: <br><span id="total">0</span></h3><!--THIS AND MAYBE APASTE IT IN INDEX.HTML-->
<a href="http://localhost:4242">
  <button>Continue to payment</button>
</a>
<script>
  document.getElementById("name").textContent = localStorage.getItem("textvalue").split(" | ")[0];
  document.getElementById("price").textContent = localStorage.getItem("textvalue").split(" | ")[2];
  document.getElementById("licence").textContent = localStorage.getItem("textvalue").split(" | ")[3];
  document.getElementById("image").setAttribute("src", localStorage.getItem("imgvalue"));

  // Call updatetotal function to update the total price in the cart
  updatetotal();

  function updatetotal() {
    var textvalue = localStorage.getItem("textvalue");
    var total = parseFloat(textvalue.split(" | ")[1].replace('$', ''));
    document.getElementById('total').textContent = '$' + total.toFixed(2);
  }
</script>