如何將圖片包含到我的 Razor Page 項目中？

Question

我正在制作一個應該充當電影租賃網站的項目。 我需要為我選擇的所有電影制作封面。 我 go 如何在我的項目中執行此操作？ 如果可以的話，我更喜歡 HTML，因為我對此最滿意。 我正在使用 Razor 頁 .NET 核心，我的語言是 C#。我還將我需要的所有圖像存儲到程序中已經存在的文件中，這樣就完成了。 這是我的代碼：

對於我的模型 class（這僅顯示封面照片的 model）：

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

這是 cshtml（我在這里包含了所有內容）：

 <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>

我還有一個 cshtml.cs 文件，但我不確定它的用途或內容。 謝謝！ 所有的幫助都是適用的！

Answer 1

所有信息都在表中，但我似乎無法弄清楚如何顯示圖片。

那是因為你沒有使用<img />元素。 更改如下：

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

確保您在wwwroot/Pictures中有照片：

還要確保您的Cover_Photo屬性存儲的值如下所示：

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();
}