[英]Blazor WASM Can't get image from database to view
我正在学习 Blazor + WEB API。 在客户端项目中,我从服务器获取所有数据到视图中,除了图像。 加载资源失败:服务器响应状态为 404 ()
这是我的文件上传服务:
public async Task<string> UploadFile(Stream msFile, string pictureName)
{
var path = $"{_env.WebRootPath}\\images\\{pictureName}";
var buffer = new byte[4 * 1096];
int bytesRead;
double totalRead = 0;
using FileStream fs = new FileStream(path, FileMode.Create);
while ((bytesRead = await msFile.ReadAsync(buffer)) != 0)
{
totalRead += bytesRead;
await fs.WriteAsync(buffer);
}
var url = $"{_httpContextAccessor.HttpContext.Request.Scheme}://{_httpContextAccessor.HttpContext.Request.Host.Value}/";
var fullPath = $"{url}images/{pictureName}";
return fullPath;
}
我的 razor 组件
@foreach (var prod in item.Products)
{
<img class="d-block w-100" style="border-radius:20px;"
src="@prod.Image">
}
您在下面设置的图像值只是名称,但我发现您存储的 static 文件和客户端位于不同的项目中:
var pictureName = $"{pictureId}{ext}";
await _fileUpload.UploadFile(msFile, pictureName);
Model.Image = pictureName;
您需要使用完整路径设置值(例如: Image
值应设置为: https://localhost:44375/images/04c91d389a8946d7b741b5a11eb73cfc.jpg
):
var pictureName = $"{pictureId}{ext}";
var fullpath = await _fileUpload.UploadFile(msFile, pictureName);
Model.Image = fullpath;
然后您可以在另一个项目( Client.WASM
)中显示图像(存储在PharmacyStore.UI
中)。
端口号( 44375
)应该属于存储 static 文件( PharmacyStore.UI
)的项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.