2.4.3 Page Builder 404 on Images from Media Gallery

Question

I've just updated to 2.4.3 (which now includes Page Builder).

When using Page Builder to add images from the Media Gallery, the selected image does not display properly because the image src is incorrect.

If I use the Upload Image option rather than Select From Gallery, there is no issue.

When using the Select From Gallery option, I find and select the image, then use Add Selected. Instead of using the expected Media Url, the image uses the stores base_url followed by the image path.

The preview image displays normally inside of the media gallery masonry block, and when inspected inside the Media Gallery, the image src appears correctly. As soon as I Add Selected, I receive an error in my browser console GET https://example.com/path/to/image.jpg 404.

If I continue on and save the page, then view on the frontend, there is another console error Get https://media.mycdn.com/media/path/to/ 404

So the backend preview inside of the Media Gallery has an image src of https://media.mycdn.com/path/to/image.jpg, then the inserted image src is https://example.com/path/to/image.jpg (which is not the correct media url), and on the frontend, the image src is https://media.mycdn.com/media/path/to/ (which is the correct domain for media, but not the correct path).

Has anyone else encountered this issue?

Answer 1

I threw this answer together after (temporarily) solving the issue, please forgive me if my explanation is not concise.

When inserting images via Media Gallery, an ajax request is sent to Magento\MediaGalleryUi\Model\InsertImageData\GetInsertImageData.php, which returns the images URL path, but does not include the domain.

The result is something like /media/wysiwyg/myimage.jpg

I use a CDN where the media path is / instead of /media. On the backend, the preview loads fine in the Media Gallery, but when the image is inserted, the CDNs domain is removed from the URL, leaving /path/to/image.jpg, which causes the image to load from the hostname of my store https://example.com/path/to/image.jpg, and https://media.mycdn.com/media/path/to/image.jpg on the frontend.

To solve this, I have modified Magento\Cms\Model\Wysiwyg\Images\GetInsertImageContent.php, changing:

if ($forceStaticPath) {
    // phpcs:ignore Magento2.Functions.DiscouragedFunction
    return parse_url($this->imagesHelper->getCurrentUrl() . $filename, PHP_URL_PATH);
}

To

if ($forceStaticPath) {
    // phpcs:ignore Magento2.Functions.DiscouragedFunction
    return $this->imagesHelper->getCurrentUrl() . $filename;
}

This is because parse_url with the PHP_URL_PATH component removes the host from the URL, leaving only the path. By removing parse_url, the full URL is used on both the frontend and backend.

I will work on a cleaner solution and (hopefully) post it at a later date.

Answer 2

Thank you for this answer! This fixed the problem for me using Amazon S3 bucket via Cloudfront CDN. The file as is would drop /media/ from URL and so all images had broken links.Since my CDN goes to the media folder this is missing. The file assumes you are already in the media folder and so only adds the url past media giving a broken kink. Does the Magento team not realize how many use CDNs the exact way I described?? Did you make a bug report and post your solution on Git? Thank you!

Answer 3

For the same issue i landed to this question. But i fixed this issue using Magento\Cms\Model\Template\FilterProvider. May be this will help some others in future.

Block file content

<?php 
namespace Ayakil\ModuleName\Block\Index;

use Magento\Cms\Model\Template\FilterProvider;

class Index extends \Magento\Framework\View\Element\Template
{ 
 protected $contentProcessor;

 public function __construct(
    ....
    FilterProvider $contentProcessor,
    ....
 ) {
    $this->contentProcessor = $contentProcessor;
 }

 public function processContent($content)
 {
    return $this->contentProcessor->getPageFilter()->filter($content);
 }
}

In phtml parse the content to block function processContent($content)