Trying to add a needle on top as a stopper. Previously, a custom-created SVG arrow was used, but now attempting to replace it with a needle.png at the same position. Any suggestions? Various options were tried to add an image in JS, but none of them worked here.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>GameOn</title>
</head>
<body>
<section>
<div class="modal spinWheel-modal fade" id="spin-modal" tabindex="-1" aria-labelledby="spin-modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header mb-1">
<div class="modal-close text-end mt-2">
<button type="button" class="btn-close text-end" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<h5 class="modal-title " id="spin-modalLabel">spin the wheel & win</h5>
</div>
<div class="modal-body">
<div id="chart">
</div>
<div id="question">
<h1></h1>
</div>
</div>
<div class="modal-footer text-center">
<div class="footer-button">
<a href="./faq.html">
<button type="button" class="btn btn-danger">How to play?</button>
</a>
</div>
<div class="footer-text mt-3">
<a href="./help.html">
<h6>Term & Conditions</h6>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// JavaScript code goes here
</script>
</body>
</html>