如何在 magento2 pdp 中添加外部圖像

Question

我們如何為 magento2 產品詳細信息頁面添加外部圖像（不是來自 magento2 后端）。 我在galley.phtml 中嘗試了一些東西，但沒有成功。 有沒有人可以解決這個問題，請幫助我。

Answer 1

通過代碼片段上傳Magento 2 中的產品圖片對開發人員很有幫助。

這是一個片段：

use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Backend\App\Action;
 
protected $_fileUploaderFactory;
 
public function __construct(
    \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,
    Action\Context $context
      
) {
 
    $this->_fileUploaderFactory = $fileUploaderFactory;
    parent::__construct($context);
}
 
public function execute(){
 
    $uploader = $this->_fileUploaderFactory->create(['fileId' => 'image']);
      
    $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
      
    $uploader->setAllowRenameFiles(false);
      
    $uploader->setFilesDispersion(false);
 
    $path = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)
      
    ->getAbsolutePath('images/');
      
    $uploader->save($path);
 
}

Answer 2

您可以嘗試以下解決方案：

https://jsshowcase.com/question/how-to-add-external-image-in-magento2-pdp

https://magento.stackexchange.com/a/309826/101754

Answer 3

將此代碼添加到 gallery.phtml

<script>
    require(['jquery'], function ($) {
        $(document).on('gallery:loaded', function () {
            var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
            var fotorama = $fotorama.data('fotorama');
            $fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
                if (extra.frame.type === 'iframe') {
                    extra.frame.$stageFrame.html('<iframe align="middle" type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
                }
            });
            fotorama.push({
                thumb: '<set your thumbnail image path>',
                'src': '<set your image/video url>',
                type: 'iframe',
                caption: '<set your caption>'
            });
        });
    });
</script>

這解決了我的要求。