Mfrhtyj

I have a custom widget with an image uploader. Backend is working perfectly, but uploaded image path is showing like this http://db7005.web49.ixl.nu/achterkant/cms/wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvZHJ3LWNvbGxlY3RpZS5qcGcifX0,/key/41232ece1b5fc0b9dda248a7e185407a69cbda1f653169244448d6c38e0abdcc/

My image is not showing on frontend. Can anyone please help me to solve this issue.

CookiecodeWidgetBlocketcwidget.xml

<?xml version="1.0" encoding="UTF-8"?>



<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">

    <widget id="cc_custom_widget" class="CookiecodeWidgetBlockBlockWidgetCustomWidget" placeholder_image="Cookiecode_WidgetBlock::images/widget_block.png">

        <label translate="true">Cookiecode - Custom block widget</label>

        <description>Cookiecode - Demo Block widget</description>

        <parameters>

            <parameter name="cc_text1" xsi:type="text" visible="true" required="true" sort_order="0" >

                <label translate="true">Text1</label>

            </parameter>

            <parameter name="cc_text2" xsi:type="text" visible="true" required="true" sort_order="0" >

                <label translate="true">Text2</label>

            </parameter>

            <parameter name="cc_text3" xsi:type="text" visible="true" required="true" sort_order="0" >

                <label translate="true">Text3</label>

            </parameter>

            <parameter name="cc_text4" xsi:type="text" visible="true" required="true" sort_order="0" >

                <label translate="true">Text4</label>

            </parameter>

            <parameter name="image1" xsi:type="block" required="true" visible="true" sort_order="10">

                <label translate="true">Image1</label>

                <block class="CookiecodeWidgetBlockBlockAdminhtmlWidgetImageChooser">

                    <data>

                        <item name="button" xsi:type="array">

                            <item name="open" xsi:type="string">Choose Image...</item>

                        </item>

                    </data>

                </block>

            </parameter>

            <parameter name="image2" xsi:type="block" required="true" visible="true" sort_order="10">

                <label translate="true">Image2</label>

                <block class="CookiecodeWidgetBlockBlockAdminhtmlWidgetImageChooser">

                    <data>

                        <item name="button" xsi:type="array">

                            <item name="open" xsi:type="string">Choose Image...</item>

                        </item>

                    </data>

                </block>

            </parameter>

            <parameter name="image3" xsi:type="block" required="true" visible="true" sort_order="10">

                <label translate="true">Image3</label>

                <block class="CookiecodeWidgetBlockBlockAdminhtmlWidgetImageChooser">

                    <data>

                        <item name="button" xsi:type="array">

                            <item name="open" xsi:type="string">Choose Image...</item>

                        </item>

                    </data>

                </block>

            </parameter>

            <parameter name="image4" xsi:type="block" required="true" visible="true" sort_order="10">

                <label translate="true">Image4</label>

                <block class="CookiecodeWidgetBlockBlockAdminhtmlWidgetImageChooser">

                    <data>

                        <item name="button" xsi:type="array">

                            <item name="open" xsi:type="string">Choose Image...</item>

                        </item>

                    </data>

                </block>

            </parameter>

            <parameter name="cc_url1" xsi:type="text" visible="true" sort_order="30">

                <label translate="true">URL1</label>

            </parameter>

            <parameter name="cc_url2" xsi:type="text" visible="true" sort_order="31">

                <label translate="true">URL2</label>

            </parameter>

            <parameter name="cc_url3" xsi:type="text" visible="true" sort_order="32">

                <label translate="true">URL3</label>

            </parameter>

            <parameter name="cc_url4" xsi:type="text" visible="true" sort_order="33">

                <label translate="true">URL4</label>

            </parameter>

        </parameters>

    </widget>

</widgets>

CookiecodeWidgetBlockBlockAdminhtmlWidgetImageChooser.php

<?php

namespace CookiecodeWidgetBlockBlockAdminhtmlWidget;

class ImageChooser extends MagentoBackendBlockTemplate

{

    /**

     * @var MagentoFrameworkDataFormElementFactory

     */

    protected $_elementFactory;

    /**

     * @param MagentoBackendBlockTemplateContext $context

     * @param MagentoFrameworkDataFormElementFactory $elementFactory

     * @param array $data

     */

    public function __construct(

        MagentoBackendBlockTemplateContext $context,

        MagentoFrameworkDataFormElementFactory $elementFactory,

        array $data = 

    ) {

        $this->_elementFactory = $elementFactory;

        parent::__construct($context, $data);

    }

    /**

     * Prepare chooser element HTML

     *

     * @param MagentoFrameworkDataFormElementAbstractElement $element Form Element

     * @return MagentoFrameworkDataFormElementAbstractElement

     */

    public function prepareElementHtml(MagentoFrameworkDataFormElementAbstractElement $element)

    {

        $config = $this->_getData('config');

        $sourceUrl = $this->getUrl('cms/wysiwyg_images/index',

            ['target_element_id' => $element->getId(), 'type' => 'file']);

        $chooser = $this->getLayout()->createBlock('MagentoBackendBlockWidgetButton')

            ->setType('button')

            ->setClass('btn-chooser')

            ->setLabel($config['button']['open'])

            ->setOnClick('MediabrowserUtility.openDialog(''. $sourceUrl .'')')

            ->setDisabled($element->getReadonly());

        $input = $this->_elementFactory->create("text", ['data' => $element->getData()]);

        $input->setId($element->getId());

        $input->setForm($element->getForm());

        $input->setClass("widget-option input-text admin__control-text");

        if ($element->getRequired()) {

            $input->addClass('required-entry');

        }

        $element->setData('after_element_html', $input->getElementHtml() . $chooser->toHtml());

        return $element;

    }

}

appcodeCookiecodeWidgetBlockviewfrontendtemplateswidgetcustom_widget.phtml

<div class="cc-custom-widget">

        <?php $cc_url1 = $this->getData('cc_url1') ?>

        <?php $cc_text1 = $this->getData('cc_text1') ?>

        <?php $cc_image = $this->getData('image2') ?>

</div>

<div class="row">

    <div class="medium-up-4" data-equalizer="">

        <div class="column drw-home text-center">

            <div class="wrapper"><a href="<?php echo $cc_url1 ?>"><span data-equalizer-watch=""><img src="<?php echo $cc_image ?>"/><?php echo $cc_text1 ?></span></a></div>

        </div>

    </div>

</div>

Did you manage to solve this?
It seems your problem is that there is a backend url to the image used in the frontend.

As a workaround you could manually convert the url to a direct link to the image as shown in this interceptor:
https://magento.stackexchange.com/a/135233/44090