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

Question

I'm Learning Blazor + WEB API. In the client project, I get all the data from the server into the view, except for the image. Failed to load resource: the server responded with a status of 404 ()

It's my file upload service:

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;
    }

My razor component

@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

The image value you set below is just the name, but I find your stored static file and client are located in different project:

var pictureName = $"{pictureId}{ext}";

await _fileUpload.UploadFile(msFile, pictureName);

Model.Image = pictureName;

You need set the value with the full path ( eg: The Image value should be setted like: https://localhost:44375/images/04c91d389a8946d7b741b5a11eb73cfc.jpg ):

var pictureName = $"{pictureId}{ext}";

var fullpath = await _fileUpload.UploadFile(msFile, pictureName);

Model.Image = fullpath;

Then you could display the images(store in PharmacyStore.UI ) in another project( Client.WASM ).

Note:

The port number( 44375 ) should belong to the project which store the static file( PharmacyStore.UI ).