Undefined offset: 2 while using explode - php

Question

I have $product_image='img1.png,img2.png,img3.png' as a string where I explode $product_image and show image as $pro_img[0], $pro_img[1] and $pro_img[2].
I get error
Message: Undefined offset: 2
if $pro_img[2] doesn't find any image.
I want to solve it using foreach loop but I don't have any idea how can I use foreach to fix this problem?
<?php $pro_img = explode(",",$product_image); ?>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="pro-large text-center">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 35%;" alt="">
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="pro-large text-center">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 35%;" alt="">
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="pro-large text-center">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 35%;" alt="">
</div>
</div>
</div>
<ul class="nav product-img-tab" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 96px;" alt="">
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 96px;" alt="">
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 96px;" alt="">
</a>
</li>
</ul>

Answer 1

Since you have various sections (home/profile/contact), that I assume you always want to display either with or without an image, I suggest using isset instead.
Isset simply checks if a key exists in the $pro_img array, and you can use that to decide whether or not to print the image tag:
<?php
$pro_img = explode(",",$product_image);
?>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="pro-large text-center">
<?php if (isset($pro_img[0])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 35%;" alt="">
<?php endif; ?>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="pro-large text-center">
<?php if (isset($pro_img[1])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 35%;" alt="">
<?php endif; ?>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="pro-large text-center">
<?php if (isset($pro_img[2])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 35%;" alt="">
<?php endif; ?>
</div>
</div>
</div>
<ul class="nav product-img-tab" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
<?php if (isset($pro_img[0])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[0]; ?>" style="width: 50%;height: 96px;" alt="">
<?php endif; ?>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
<?php if (isset($pro_img[1])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[1]; ?>" style="width: 50%;height: 96px;" alt="">
<?php endif; ?>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
<?php if (isset($pro_img[2])) : ?>
<img src="<?php echo base_url(); ?>resource/product/<?php echo $pro_img[2]; ?>" style="width: 50%;height: 96px;" alt="">
<?php endif; ?>
</a>
</li>
</ul>