external images link magento 2.2

Question

I'm trying to show images from external images in catalog search results

I created a text attribute containing the full path URL named custom_image for each product

This phtml is responsible to show images (Sm emarket theme)

vendor/magento/module-catalog/view/frontend/templates/product/image_with_borders.phtml

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>

<span class="product-image-container"
      style="width:<?= /* @escapeNotVerified */ $block->getWidth() ?>px;">
    <span class="product-image-wrapper"
          style="padding-bottom: <?= /* @escapeNotVerified */ ($block->getRatio() * 100) ?>%;">
        <img class="product-image-photo"
            <?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
            src="<?= /* @escapeNotVerified */ $block->getImageUrl() ?>"
            width="<?= /* @escapeNotVerified */ $block->getResizedImageWidth() ?>"
            height="<?= /* @escapeNotVerified */ $block->getResizedImageHeight() ?>"
            alt="<?= /* @escapeNotVerified */ $block->stripTags($block->getLabel(), null, true) ?>"/></span>
</span>

I'm trying to change reference for images like this

src="<?= /* @escapeNotVerified */ echo $product->getCustomAttributes('custom_image') ?>"

but I'm sure because of my poor coding knowledge I can't achieve the hoping results. Maybe I have to add product reference or add a field to block variable but I can't find where

Answer 1

Replace below code in vendor/magento/module-catalog/view/frontend/templates/product/image_with_borders.phtml file.
<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
<?php
$id = $block->getProductId();
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$_product= $objectManager->create('Magento\Catalog\Model\Product')->load($id);
$custom_url = $_product->getCustomImage();
if($custom_url == '') {
  $custom_url = $block->getImageUrl();
}
?>
<span class="product-image-container"
      style="width:<?= $block->escapeHtmlAttr($block->getWidth()) ?>px;">
    <span class="product-image-wrapper"
          style="padding-bottom: <?= ($block->getRatio() * 100) ?>%;">
        <img class="<?= $block->escapeHtmlAttr($block->getClass()) ?>"
            <?= $block->escapeHtmlAttr($block->getCustomAttributes()) ?>
            src="<?= $block->escapeUrl($custom_url) ?>"
            max-width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
            max-height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"
            alt="<?= /* @noEscape */ $block->stripTags($block->getLabel(), null, true) ?>"/>
    </span>
</span>