Why i cannot fetch my images from my .json file?

here is my html code:

<div id="card-container" class="card-container"></div>
    <!-- card and ftech data from.json -->
    <script>
     document.addEventListener('DOMContentLoaded', function() {
            fetch('data/data.json') // Adjust the path if needed
                .then(response => response.json())
                .then(jsonData => {
                    const container = document.getElementById('card-container');
                    jsonData.forEach(movie => {
                        const card = document.createElement('div');
                        card.className = 'card';
                        card.innerHTML = `
                            <img src="${movie.image}" class="card-img-top" alt="${movie.movie_Name}">
                            <div class="card-body">
                                <h5 class="card-title">${movie.movie_Name}</h5>
                                <p class="card-text">Release Date: ${movie.release_Date}<br>
                                Director: ${movie.director}<br>
                                Location: ${movie.location}<br>
                                Genre: ${movie.genre}</p>
                                <a href="#" class="btn btn-primary">More Details</a>
                            </div>
                        `;
                        container.appendChild(card);
                    });
                })
                .catch(error => console.error('Error fetching JSON:', error));
        });


    </script>

here is my .json file:

 {
        "id": 1,
        "movie_Name": "Mission: Cross",
        "release_Date": "August 9, 2024",
        "director": "Lee Myeong-hun",
        "location": "South Korea",
        "genre": "Action/Comedy",
        "image": "/img/MissionCross.jpg"
        
        
    },

I already try many way, but still it didn’t work. can someone help me?

here is the output I get:
enter image description here