Cannot display image inserted by WYSIWYG editor

Question

I created a form on backend and inserted an image into the editor. The image displays properly in the editor. However, the image cannot be displayed on frontend and 404 error is shown on the console. How to solve it? Thank you in advance.

Image tag generated by Magento:

<img alt="" src="{{media url=" wysiwyg="" screen_shot_2015-09-23_at_2.43.13_am.jpg"}}"="">

Error Message:

http://127.0.0.1/magento/index.php/%7B%7Bmedia%20url= Failed to load resource: the server responded with a status of 404 (Not Found)

Update (06-10-2015 12:33):

It seems that the cause of the problem may be wysiwyg configuration.

In the php file where the wysiwyg editor is added, if I change the wysiwyg configuration to the following:

$fieldset->addField('content', 'editor', array(
        ......
        'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig()
    ));

The admin panel even cannot find the image insert page and the image inserted before also disappears from the editor. Besides that, the content from WYSIWYG is output by PHP. Will it be the cause?

This is my current wysiwyg configuration:

$wysiwygConfig = Mage::getSingleton('cms/wysiwyg_config')->getConfig();
$wysiwygConfig->addData(array(
        'add_variables'             => false,
        'plugins'                   => array(),
        'widget_window_url'         => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/widget/index'),
        'directives_url'            => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive'),
        'directives_url_quoted'     => preg_quote(Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive')),
        'files_browser_window_url'  => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg_images/index'),
    ));

Answer 1

I finally solved the problem. The cause of the problem is unprocessed shortcodes in the html content, which is the {{ media url="..." }} statement. Before echo this statement, the html content should be process by the processor from helper "cms". Below is the code:

$html_content = $content_from_db['content'];
$html_content = Mage::helper('cms')->getPageTemplateProcessor()->filter($html_content);
echo $html_content;

Answer 2

You have to change it to:

<img alt="" src="{{media url="wysiwyg/screen_shot_2015-09-23_at_2.43.13_am.jpg"}}">

Edit:

You might also want to try it with different quotes:

<img alt="" src="{{media url='wysiwyg/screen_shot_2015-09-23_at_2.43.13_am.jpg'}}">

And make sure that the media/wysiwyg folder has the correct permissions

Edit 2:

Because you are using the CMS content in a custom template, you can also use direct links like this:

<img alt="" src="/media/wysiwyg/screen_shot_2015-09-23_at_2.43.13_am.jpg">

This will work if the media is hosted on the same domain, and the Magento install is not in a subfolder. If it's located in a subfolder use the following:

<img alt="" src="/subfolder/media/wysiwyg/screen_shot_2015-09-23_at_2.43.13_am.jpg">

Edit 3:

If you want to display a static block in a custom phtml template, you can do the following:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('block_identifier')->toHtml(); 
?> 

Where block_identifier is the block identifier.