Blazor WASM 无法从数据库中获取图像进行查看

Question

我正在学习 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;
    }

我的剃须刀组件

@foreach (var prod in item.Products)
{
    <img class="d-block w-100" style="border-radius:20px;"
         src="@prod.Image">
}

GitHub https://github.com/ValencyJacob/PharmacyStore

Answer 1

您在下面设置的图片值只是名称，但我发现您存储的静态文件和客户端位于不同的项目中：

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)应该属于存放静态文件(PharmacyStore.UI)的项目。

Blazor WASM 无法从数据库中获取图像进行查看

Blazor WASM Can't get image from database to view

c#

.net-core

asp.net-core-webapi

blazor-server-side

blazor-webassembly

注：