使用图像路径显示图像不起作用答案

【问题标题】：Display Image using Image Path isn't Working使用图像路径显示图像不起作用
【发布时间】：2020-09-19 14:40:49
【问题描述】：

我将用户图像保存到我的 wwwroot 文件夹中的一个文件夹中，并将图像路径保存到我的数据库 Razor Pages，现在我想使用图像路径显示相同的图像，但它不起作用。

这是我保存图像的代码

if (Imagefile != null && Imagefile.Length > 0)
            {
                var imgpath = @"\Upload\pkgimages\";
                var uploadpth = _env.WebRootPath + imgpath;

                //Create Directory
                if (!Directory.Exists(uploadpth))
                {
                    Directory.CreateDirectory(uploadpth);
                }
                //create file
                var uniqueFilename = Guid.NewGuid().ToString();
                var filename = Path.GetFileName(uniqueFilename + "." + Imagefile.FileName.Split(".")[1].ToLower());
                string fullPath = Path.Combine(uploadpth, filename);
                using (var filestream = new FileStream(fullPath, FileMode.Create))
                {
                    Input.ImagePath = fullPath;
                    await Imagefile.CopyToAsync(filestream);
                }
            }

            var today = DateTime.Now;
            var exp = today.AddDays(Input.Duration);
            Input.expDate = exp;
            var pkg= new UserPackages
            {
                Title = Input.Title,
                BeginDate = DateTime.Now,
                ExpDate=Input.expDate,
                Status = "Pending",
                PackageID = pckID,
                UserID = Loginuser,                  
                ImagePath = Input.ImagePath
            };
            await _userPackageDataService.AddUserPackage(pkg)

它现在将所有内容正确保存到各自的位置，以检索这些详细信息并显示上传的图像

这是我的代码

 public async Task OnGetAsync(string ID)
    {          
        Guid _pkgID = Guid.Parse(ID);
        var package= await _userPackageDataService.ReviewPackage(_pkgID);
        var result= _mapper.Map<packageDTO>(package);
        UserPackage= result;
    }

然后在我的 chtml 文件中我有这个标记

  <div class="col-sm-6">
            <img src="@Model.UserPackage.ImagePath" alt="Image" style="width:200px; height:200px;" />
        </div>

我也试过

 <div class="col-sm-6">
            <img src="@Uri.Content(Model.UserPackage.ImagePath)" alt="Image" style="width:200px; height:200px;" />
        </div>

它返回希望保存到数据库的完整图像路径，但图像未在浏览器上呈现，请问我在这里遗漏了什么？谢谢

【问题讨论】：

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

【解决方案1】：

img 元素的 src 属性需要图像的相对或完整 URL，而不是文件路径。

假设您的图像文件夹位于 wwwroot 中，请尝试以下操作：

<img src="/upload/pkgimages/@(Path.GetFileName(Model.UserPackage.ImagePath))" alt="Image" style="width:200px; height:200px;" />

【讨论】：

【解决方案2】：

解决此问题的方法是在没有根路径的情况下保存到数据库的路径。然后在你的剃须刀页面中，

<img src="~/@Model.UserPackage.ImagePath" />

看看我添加的新方式。根路径符号应该添加到您的路径中

【讨论】：

感谢大家的回复，但这些答案都没有解决问题，@Mike，是剃刀页面的问题吗？

【解决方案3】：

问题似乎在于对事情发生的上下文的误解。

当您指定<img src="@Model.UserPackage.ImagePath" 时，您将设置文件存储在服务器中的路径，而不是浏览器需要转到的URL 以获取要显示的图像。

要实现您想要的，您需要有一个端点（控制器/动作）接收文件 id 并返回文件内容。这里有一些伪代码可以指导您解决问题。

在服务器中，您将有一个操作来获取文件内容：

public async Task<ActionResult> OnGetFile(string id)
{
    var fileData = _someService.GetFileInfo(id);
    return File(fileData.ImagePath, "application/octet-stream", 
                fileData.fileName);
}

在 HTML img 标签中：

<div class="col-sm-6">
   <img src="/image-controller/action/@Model.UserPackage.PackageID" alt="Image" style="width:200px; height:200px;" />
</div>

【讨论】：