How to display product image?

Question

1C-Bitrix

In bitrix, a product card can have 2,3,4 or more images. You need to make sure that only the first image is loaded. At the moment there is a cycle, you need to somehow remove it. Information on the Internet has not yet been found.
code so far is:

<div class="col-xs-12 col-sm-12">
    <?if($arResult["IMAGES"]):?>
  <?$i=1;foreach($arResult["IMAGES"] as $key => $img):?>
  <img src="<?=$img["BIG_IMG"]["src"]?>" alt="<?=$img["NAME"]["description"]?>" title="<?=$img["NAME"]["description"]?>">
    <?$i++;endforeach; ?>
    <?endif;?>
</div>

If you check through print_r, it gives an array of several images found. I need to output only the first array..

Answer 1

You could use was just 0 key
but it's better to just pull out the first element of the array. keys can be changed.
$first = array_shift($arResult["IMAGES"]);
<img src="<?=$first["BIG_IMG"]["src"]?>">

Answer 2

Solved the problem. Ended the loop with break; if the image id is more than 0.
The solution is not ingenious, of course, but it can help someone:

<div class="col-xs-12 col-sm-12">
    <?if($arResult["IMAGES"]):?>
  <?$i=1;foreach($arResult["IMAGES"] as $key => $img):?>
  <img <?if($i=1):?> itemprop="image"<?endif;?> src="<?=$img["BIG_IMG"]["src"]?>" alt="<?=$img["NAME"]["description"]?>" title="<?=$img["NAME"]["description"]?>">
    <?if ($i > 0) {break;}?>
    <?endforeach;?>
    <?endif;?>
</div>