How do I include pictures into my Razor Page project?

Question

I am making a project that is supposed to act as a movie rental website. I need to have cover pages for all of the movies in my selection. How would I go about doing this in my project? I would prefer HTML if I could just because i'm the most comfortable with that. I am using Razor Pages .NET CORE and my language is C#. I also have all the images I need stored into a file already in the program so that is done. Here is my code:

for my models class (this is only showing the model for cover photo):

[Display(Name = "Cover Photo")]
    [Column(TypeName = "varchar(128)")]
    public string Cover_Photo { get; set; }

Here is the cshtml(I included everything here):

 <p>
    <a asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Title)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].RatingId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Description)
            </th>
        
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Length)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].GenreId)
            </th>
            <th>
                DVD / BluRay
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Cover_Photo)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Movie[0].Release_Date)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model.Movie) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Rating.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
           
            <td>
                @Html.DisplayFor(modelItem => item.Length)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Genre.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Is_Dvd) /  @Html.DisplayFor(modelItem => item.Is_BluRay)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Cover_Photo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Release_Date)
            </td>
            <td>
                <a asp-page="./Edit" asp-route-id="@item.MovieId">Edit</a> |
                <a asp-page="./Details" asp-route-id="@item.MovieId">Details</a> |
                <a asp-page="./Delete" asp-route-id="@item.MovieId">Delete</a> |
                <a asp-page="../Reviews/Create" asp-route-id="@item.MovieId">Add Review</a>
            </td>
        </tr>
}
    </tbody>
</table>

I also have a cshtml.cs file but im not sure what that is for or what goes in there. Thank you! all help is appricated!

Answer 1

All the information is in the table but I cant seem to figure out how to get the pictures to show.

That is because you do not use <img /> element. Change like below:

<img src="@item.Cover_Photo" />

Be sure you have photos in wwwroot/Pictures :

Also be sure your Cover_Photo property stored value like below:

public List<TestModel> Movie { get; set; }

public IActionResult OnGet()
{
    Movie = new List<TestModel>()
    {
        new TestModel(){ Cover_Photo="Pictures/book1.jpg"},
        new TestModel(){ Cover_Photo="Pictures/book2.jpg"}
    };
    return Page();
}