Ttdfjt

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