MAUI Blazor C# Image Not Showing Issue

Question

I'm just displaying my local network PC movies. In such case I have inserted the movie cover name as moviename_cover.jpg, but it's not showing in the output. What is the issue here in my below code

Issue

<img src="@GetCoverImageUrl(Path.GetFileNameWithoutExtension(movieFileName))" alt="Movie Cover" class="movie-cover" />

Issue Method

// Function to get the cover image URL based on the movie name
    private string GetCoverImageUrl(string movieName)
    {
        // Construct a relative URL for the movie cover image
        return $"/MovieCovers/{movieName}_cover.jpg";
    }

Here is my entire code:

@page "/movies"

<h3>Movies</h3>

<div class="movie-container">
    @foreach (var movieFileName in GetMovieFiles())
    {
        <div class="movie-card" style="cursor: pointer;" @onclick="() => OpenLocalPlayer(movieFileName)">
            <div class="movie-title">@Path.GetFileNameWithoutExtension(movieFileName)</div>
            <img src="@GetCoverImageUrl(Path.GetFileNameWithoutExtension(movieFileName))" alt="Movie Cover" class="movie-cover" />
        </div>
    }
</div>

<style>
    .movie-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .movie-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        width: 200px;
        height: 200px;
        overflow: hidden;
        position: relative;
    }

    .movie-title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 8px;
        margin: 0;
        z-index: 1; /* Ensure the title is above the image */
    }

    .movie-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }
</style>

@code {
    private string serverPath = "\\\\192.168.1.6\\Test\\";  // Replace with your actual server path

    // Function to get the list of movie files with .mp4 and .mkv format
    private IEnumerable<string> GetMovieFiles()
    {
        try
        {
            // Get all files with .mp4 and .mkv extension in the specified directory
            var movieFiles = Directory.GetFiles(serverPath, "*.mp4")
                .Concat(Directory.GetFiles(serverPath, "*.mkv"));

            return movieFiles;
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur during file retrieval
            Console.WriteLine($"Error getting movie files: {ex.Message}");
            return Enumerable.Empty<string>();
        }
    }

    // Function to open the local player with the selected movie file
    private void OpenLocalPlayer(string fileName)
    {
        try
        {
            // Combine the server path and file name to get the full path
            string fullPath = Path.Combine(serverPath, fileName);

            // Open the file with the default associated application
            System.Diagnostics.Process.Start(new System.Diagnostics.ProcessStartInfo
            {
                FileName = fullPath,
                UseShellExecute = true
            });
        }
        catch (Exception ex)
        {
            // Handle any exceptions that may occur during file opening
            Console.WriteLine($"Error opening movie: {ex.Message}");
        }
    }

    // Function to get the cover image URL based on the movie name
    private string GetCoverImageUrl(string movieName)
    {
        // Construct a relative URL for the movie cover image
        return $"/MovieCovers/{movieName}_cover.jpg";
    }
}

Answer 1

You can check if you have placed the images in a new folder named MovieCovers in the app's web root (wwwroot).

Then you can create a string to dynamically set to the value of imageSource in C#.

 <img src="@imageSource" />

    @code {
        private string? imageSource;
   
        private void ShowImage(string movieName)
        {
            imageSource = $"/MovieCovers/{movieName}_cover.jpg";
        }
    }