Question

我正在尝试创建一个简单的图库。上传工作，但我有显示这些图像的问题。

在互联网上，我发现这是正确的方法：

    [NotMapped]
    public string ImageUrl
    {
        get
        {
            var isEmpty = String.IsNullOrWhiteSpace(ImgName);

            if(isEmpty)
            {
                return Path.Combine("~/Images", "noImageAvailable.png");
            }else
            {
                return Path.Combine("~/Images/uploaded", ImgName);
            }
        }
    }

并在视图中

@foreach (var item in Model) {
    ...
    @{ var imgPath = HostingEnvironment.MapPath(item.ImageUrl); }
    <img src="@Url.Content(imgPath)"/>

产生：

<img src="C:\......\Images\uploaded\0_634927659072110613.jpg"/>

对我有用的是：

    [NotMapped]
    public string ImageUrl
    {
        get
        {
            var isEmpty = String.IsNullOrWhiteSpace(ImgName);

            if(isEmpty)
            {
                return Path.Combine("../Images", "noImageAvailable.png");
            }else
            {
                return Path.Combine("../Images/uploaded", ImgName);
            }
        }
    }

并在视图中：

@foreach (var item in Model) {
    .....
    <img src="@Url.Content(item.ImageUrl)"/>

产生：

<img src="../Images/uploaded\0_634927649098750170.jpg"/>

说明

有两点不同：

〜/ Images vs ../ Images
视图中的行

有趣的是该行

<img src="C:\......\Images\uploaded\0_634927659072110613.jpg"/>

在静态独立文件中显示图像，而在IIS提供的图像则不显示。只有空白而不是图像。

我的问题是什么是正确的方法，为什么第一个不起作用？

Answer 1

您的代码正在完全按照您的要求进行操作。第一个不起作用，因为var imgPath = HostingEnvironment.MapPath(item.ImageUrl);将服务器上的物理路径返回到图像URL，而不是URL。将第一个块与<img src="@Url.Content(item.ImageUrl)"/>一起使用。这看起来像：

[NotMapped]
public string ImageUrl
{
    get
    {
        var isEmpty = String.IsNullOrWhiteSpace(ImgName);

        if(isEmpty)
        {
            return Path.Combine("~/Images", "noImageAvailable.png");
        }else
        {
            return Path.Combine("~/Images/uploaded", ImgName);
        }
    }
}

与您的观点：

@foreach (var item in Model) {
    .....
    <img src="@Url.Content(item.ImageUrl)"/>

“〜/ Images / ...”从网络根目录中找到文件夹Images，然后......
“../ Images / ...”相对于当前位置 - 上升一个文件夹，找到文件夹图像，然后......

显示上传的图像

1 个答案: