In the Blazor project, we have a list of photos that are retrieved and displayed in a loop of these photos, which are stored as bytes in the SQL Server database. These photos are displayed correctly and without problems responsively. The problem is that I can't and don't know how to upload these photos as large photos. I have used several methods, but when I want to open a photo in a new tab, only a blank page is displayed. If possible, if you have a solution for this problem, please send it to me.
@using System.Drawing
@using System.IO
@inject IValueMeterLists _iValueMeterLists
@inject ILectureRepository _Lecture
@inject NavigationManager uriHelper
@if (itm == null)
{
<LoadingSpinner />
}
else
{
<section >
<div >
<div >
<div >
<div >
<h3 >@StrComponentTitle</h3>
<div >
<ul >
<li>
<div >
<span ></span>
<p>Agent: </p>
</div>
<div >
<p>@itm.AgentFullName</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Type Kind : </p>
</div>
<div >
<p> @itm.ValueMeterListsKind.Name </p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Rcpt Code :</p>
</div>
<div >
<p>@itm.Code </p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Date :</p>
</div>
<div >
<p>@itm.Moment.ToPersianDateString("yyyy/MM/dd")</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Register Date:</p>
</div>
<div >
<p>@itm.RegistMoment.ToPersianDateString("yyyy/MM/dd")</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Travel Cost:</p>
</div>
<div >
<p>@itm.TravelCost</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Other Costs:</p>
</div>
<div >
<p>@itm.OtherCost</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Remarks:</p>
</div>
<div >
<p>@itm.Remarks</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>--:</p>
</div>
<div >
<p>--</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section >
<div >
<div >
<div >
<div >
<h3 >Waranty Info</h3>
<div >
<ul >
<li>
<div >
<span ></span>
<p>Product Name: </p>
</div>
<div >
<p>@itm.ValueMeter.Product.GoodsName</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Prod Number : </p>
</div>
<div >
<p> @itm.ValueMeter.ProductSerialNumber </p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Earanty Statue :</p>
</div>
<div >
<p>
@if (WarInfoStart != null)
{
@WarInfoStart.WarStatus.Name;
}
else
{
<div>UnKnown</div>
}
</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Waranty Walidation :</p>
</div>
<div >
<p>
@if (WarInfo != null)
{
@WarInfo.WarStatus.Name;
}
else
{
<div>UnKnown</div>
}
</p>
</div>
</li>
<li>
<div >
<span ></span>
<p>Waranty End Date:</p>
</div>
<div >
<p>
@if (WarInfo != null)
{
@WarInfo.EndRepaierWarDate.Value.ToPersianDateString("yyyy/MM/dd");
}
else
{
<LoadingSpinnerLinear></LoadingSpinnerLinear>
}
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
@if (itm.ValueMeterListsFiles != null)
{
<section >
<div >
<div >
@foreach (var itms in itm.ValueMeterListsFiles)
{
<div >
<div >
<figure >
@*<img src="@ConvertImage(itms.Photo)" alt="Event card thumbnail"> style="width: 400px" *@
<a @onclick="@(() => RunMyJs(Convert.ToBase64String(@itms.Photo)))" style="cursor:pointer;">
<img id="myImg" src="data:image/jpeg;base64, @Convert.ToBase64String(@itms.Photo)" style="cursor:pointer;" />
</a>
<figcaption>
<a @onclick="@(() => RunMyJs(Convert.ToBase64String(@itms.Photo)))" style="cursor:pointer;">
<h4> @itms.ValueMeterListsFileType.TypeName </h4>
</a>
@* <ul >
<li>
<span ></span>
<p>--</p>
</li>
<li>
<span ></span>
<p> -- </p>
</li>
</ul>*@
</figcaption>
<!-- end /.figcaption -->
</figure>
<!-- end /.figure -->
</div>
<!-- end /.event_card -->
</div>
}
</div>
<!-- end /.row -->
</div>
<!-- end /.container -->
</section>
}
}
@code {
#region Parameters
[Parameter]
public short FiscalYear { get; set; }
[Parameter]
public int ValueMeterID { get; set; }
[Parameter]
public int ValueMeterListsKindID { get; set; }
[Parameter]
public long ValueMeterListsCode { get; set; }
[Parameter]
public String StrComponentTitle { get; set; }
public LosacoWeb.Shared.DTOs.ValueMeter.ValueMeterListsMp itm;
public string ImageBase64;
LosacoWeb.Shared.DTOs.ValueMeter.WarInfoMp WarInfo;
LosacoWeb.Shared.DTOs.ValueMeter.WarInfoMp WarInfoStart;
#endregion
protected override async Task OnInitializedAsync()
{
try
{
itm = await _iValueMeterLists.GetValueMeterLists(FiscalYear, ValueMeterID,
ValueMeterListsKindID, ValueMeterListsCode);
}
catch (Exception ex)
{
}
try
{
WarInfo = await _Lecture.GetWarantyStatus(itm.ValueMeter.Product.GoodsCode, itm.ValueMeter.ProductSerialNumber);
StateHasChanged();
}
catch(Exception ex)
{
}
try
{
WarInfoStart = await _Lecture.GetWarantyStatus(itm.ValueMeter.Product.GoodsCode, itm.ValueMeter.ProductSerialNumber, itm.ValueMeter.ID);
StateHasChanged();
}
catch(Exception ex)
{
}
}
private void gotopageImage()
{
uriHelper.NavigateTo("data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P goOXMv8 fhw/v739/f 8PD98fH/8mJl fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8 QePLl38MGBr8JCP zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/ MjMUcAN8zM/9wcM8ZGcATEL QePdZWf/29uc/P9cmJu9MTDImIN /r7 /vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo Pj/ pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP 8vH9QUK vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl LFt8dgUE9PT5x5aHBwcP AgP WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV euTeJm1Ki7A73qNWtFiF /gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM fOqD6DDj1aZpITp0dtGCDhr fVuCu3zlg49ijaokTZTo27uG7Gjn2P hI8 PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS 0pCZbEhAAOw==", true);
}
public async Task ShoPicture(String Image)
{
try
{
await uriHelper.NavigateTo(Image);
}
catch (Exception ex)
{
}
}
}
In fact, I used the following method to display the photo. But I did not reach any result. The photo is displayed in the current tab. But when I add the _blank option to the file selection to display the photo in the new Tab, only a blank page is displayed. Please advise.
private void gotopageImage()
{
uriHelper.NavigateTo("data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P goOXMv8 fhw/v739/f 8PD98fH/8mJl fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8 QePLl38MGBr8JCP zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/ MjMUcAN8zM/9wcM8ZGcATEL QePdZWf/29uc/P9cmJu9MTDImIN /r7 /vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo Pj/ pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP 8vH9QUK vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl LFt8dgUE9PT5x5aHBwcP AgP WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV euTeJm1Ki7A73qNWtFiF /gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM fOqD6DDj1aZpITp0dtGCDhr fVuCu3zlg49ijaokTZTo27uG7Gjn2P hI8 PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS 0pCZbEhAAOw==", true);
}
CodePudding user response：
You can use javascript and html frame to show images that sent as byte to new page. as I used javascript in Blazor page in this link.
at first create a javascript file and name it shobytefilejs.js. then find index.html in wwwroot folder. then copy following method into the js file.
function window_download(datauri) {
var iframe = "<iframe width='100%' height='100%' src='" datauri "'></iframe>"
var x = window.open();
x.document.open();
x.document.write(iframe);
x.document.close();
}
Then inject @inject IJSRuntime _jsRuntime; in your page or component.
After that, in you Blazor page or Blazor component define a method something like bellow:
public async Task RunMyJs(String Image)
{
try
{
await _jsRuntime.InvokeVoidAsync("window_download", "data:image/gif;base64," Image);
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
}
finally call your method in you html code like follow:
<a @onclick="@(() => RunMyJs(Convert.ToBase64String(@itms.Photo)))" style="cursor:pointer;">
<img id="myImg" src="data:image/jpeg;base64, @Convert.ToBase64String(@itms.Photo)" style="cursor:pointer;" />
</a>