如何将图片包含到我的 Razor 页面项目中？答案

【问题标题】：How do I include pictures into my Razor Page project?如何将图片包含到我的 Razor 页面项目中？
【发布时间】：2021-07-08 20:27:50
【问题描述】：

我正在制作一个应该充当电影租赁网站的项目。我需要为我选择的所有电影提供封面。我将如何在我的项目中执行此操作？如果可以的话，我会更喜欢 HTML，因为我对此最满意。我正在使用 Razor Pages .NET CORE，我的语言是 C#。我还将所有需要的图像存储到程序中的文件中，这样就完成了。这是我的代码：

对于我的模型类（这仅显示封面照片的模型）：

[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 文件，但我不确定它的用途或其中的内容。谢谢！所有帮助都得到了应用！

【问题讨论】：

您如何存储图像？ Cover_Photo 是对您想要的照片的引用吗？需要更多信息
@olabacker 我将图像作为字符串存储在其中。我将实际图像放入 www.root 中名为“Pictures”的文件夹中。我有 5 部电影都有不同的封面。所有信息都在表格中，但我似乎无法弄清楚如何让图片显示。我试图在表格中这样做，但显示的只是“图片/American_Sniper_Cover.jpg（或我试图做的任何电影）
嗨@AutumnLewis，有更新吗？我的回答是否帮助您解决了问题？如果是这样，你能接受作为答案吗？参考：How to accept as answer.Thanks.

标签： c# asp.net-core razor-pages photo

【解决方案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();
}

【讨论】：