get thumbnail image in product collection magento 2.3

Question

get thumbnail image in product collection magento 2.3 but base image get how to get thumbnail image

phtml file

          <?php 
            $ProductImageUrl = $block->getUrl('pub/media/catalog').'product'.$product->getImage();
        ?>
        <a class="productlinks" href="" title=""><img src="<?php echo $ProductImageUrl; ?>" width="210" height="210">
        </a>

Block File

protected $_productCollectionFactory;

public function __construct(
   \Magento\Catalog\Block\Product\Context $context, 
   \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory,
array $data = []
)
{    
       $this->_productCollectionFactory = $productCollectionFactory;    
       parent::__construct($context, $data);
}

public function getProductCollection()
{
    $porIds=array(1,2,3);
    $collection = $this->_productCollectionFactory->create();
    $collection->addAttributeToSelect('*');
    $collection->addFieldToFilter('entity_id', array('in' => $porIds));
     
    return $collection;
}

Answer 1

Use Magento\Catalog\Helper\Image in your block to get the thumbnail image of product

public function getImageUrl($product) {
    $this->imageHelper->init($product, 'product_thumbnail_image')->getUrl();
}

Answer 2

1.add below in phtml file, it is based on the \Magento\Catalog\Block\Product\ListProduct

$imageDisplayArea = 'your_custom_img_id';
$productImage = $block->getImage($product, $imageDisplayArea);
//$position = 'left:' . $productImage->getWidth() . 'px;'. 'top:' . $productImage->getHeight() . 'px;';

<a href="<?= $escaper->escapeUrl($product->getProductUrl()) ?>"
        class="product photo product-item-photo"
        tabindex="-1">
        <?= $productImage->toHtml() ?>
</a>

2. Go to theme file app/design/frontname/Namespace/ThemeName/etc/view.xml

add any custom image id under <images module="Magento_Catalog"> something like below with type = thumbnail with own width and height:

<view ......>
    <media>
        <images module="Magento_Catalog">
            .......                
<image id="your_custom_img_id" type="thumbnail">
        <width>140</width>
        <height>140</height>
</image>
           
        

make sure <image id="your_custom_img_id" and $imageDisplayArea = 'your_custom_img_id'; both should have same value.

if changes are not reflected then you resize images using php bin/magento catalog:images:resize

Answer 3

phtml File

  <?php
  $ProductImageUrl = $block->getUrl('pub/media/catalog').'product'.$product->getData('thumbnail');
  ?>

 <a class="productlinks" href="#" title=""><img src="<?php echo $ProductImageUrl; ?>" width="210" height="210">
 </a>