здесь я использую веб-приложение angular 4. здесь, если изображение находится в расположении файла, покажите изображение, а другое условие, если изображение не отображается, пустое пространство. (не показывать как это )
если кто-нибудь, пожалуйста, помогите мне в этом решении
Это мой файл Component.html
<div class = "figure-left col-md-5 col-sm-5 col-xs-12">
<figure class = "photo">
<img [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block" />
</figure>
</div>
это мой WebAPI
....etc.........
foreach (spSpecificItems_Result item in itemList)
{
ITemDetail objItem = new ITemDetail();
var image = item.ItemImage;
if (image != null)
{
base64String = System.Convert.ToBase64String(image);
htmlsrc = "data:image/png;base64," + base64String;
}
else
{
//here else condition i want to show empty space in my output
}
objItem.ItemID = item.ItemID;
objItem.ItemCode = item.ItemCode;
etc ....etc....
вы можете использовать директиву
<div class = "figure-left col-md-5 col-sm-5 col-xs-12" *ngIf = "condition">
<figure class = "photo">
<img [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block" />
</figure>
</div>
если это правда, он показывает блок, в противном случае он остается пустым
вы можете использовать любой из этих двух методов
* ngIf удалит элемент из DOM. когда скрытый атрибут просто измените свойство отображения на none
<img *ngIf = "product.ItemImage" [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block"/>
<img [hidden] = "product.ItemImage" [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block"/>
или используйте onError для отображения изображения по умолчанию, если что-то пошло не так
<img *ngIf = "product.ItemImage" [src] = "product.ItemImage" class = "img-responsive img-thumbnail center-block"
onError = "this.src='./app/assets/images/placeholder.jpg';" alt = "..."/>
Вы можете создать собственный класс изображения и установить высоту и ширину части, или вы также можете установить изображение по умолчанию, если изображение недоступно.
<div class = "col-md-6">
<img src = "{{logo+''+data.image}}" alt = "Item Image" height = "150" width = "200" style = "min-height: 91px; max-width: 109px" onError = "this.src='assets/images/users/medilogo.png';">
</div>
Если приведенный выше код не работает, просто сообщите мне, чтобы я мог вам помочь
это нормально, если вы показываете изображение по умолчанию, если изображение не найдено?