Custom attribute - img source url trailing forward slash

Question

I have a custom attribute for my product page. This attribute allows me to display 'badges' such as free deliver, etc. The attribute value is the name of the badge image and I use the below code in the temporal to display the images. However, there is always a trailing forward slash at the end of the URL so the images don't display. How can I get rid of this? Thank you in Advance

Andy

Code in the template:

    <div class="product-attribute product-attribute--badges">
        <ul class="product-attribute__list">
            <?php foreach ($badges as $badge) : ?>
                <?php $img_src = strtolower(preg_replace('/[^A-Za-z0-9]/', '', $badge)); ?>
                <li class="product-attribute__item">
                    <img
                        class="product-attribute__image"
                        src="<?php echo $this->getUrl('pub/media/wysiwyg/badge/' . $img_src . '.png') ?>"                       
                        alt="<?php echo $this->escapeHtml($badge); ?>"
                        title="<?php echo $this->escapeHtml($badge); ?>"
                    />
                </li>
            <?php endforeach; // $badges as $badge ?>
        </ul>
    </div>
<?php endif; // !empty($badges) && count($badges) > 0 ?>```

Answer 1

use below code instead of your code

    <div class="product-attribute product-attribute--badges">
        <ul class="product-attribute__list">
            <?php foreach ($badges as $badge) : ?>
                <?php $img_src = strtolower(preg_replace('/[^A-Za-z0-9]/', '', $badge)); ?>
                <li class="product-attribute__item">
                    <img
                        class="product-attribute__image"
                        src="<?php echo $this->getUrl().'pub/media/wysiwyg/badge/'. $img_src.'.png'; ?>"                       
                        alt="<?php echo $this->escapeHtml($badge); ?>"
                        title="<?php echo $this->escapeHtml($badge); ?>"
                    />
                </li>
            <?php endforeach; // $badges as $badge ?>
        </ul>
    </div>
<?php endif; // !empty($badges) && count($badges) > 0 ?>

Answer 2

I suggest you try this:

src="<?php echo $this->getUrl().'pub/media/wysiwyg/badge/'. $img_src'.png' ?>"