Add images to top navigation

Question

I want to add images to top navigation menu, I use this code:

app/code/local/Mage/Catalog/Model/Observer.php

        $categoryData = array(
            'name' => $category->getName(),
        'id' => $nodeId,
        'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
        'is_active' => $this->_isActiveMenuCategory($category),
        'thumbnail' => Mage::getModel('catalog/category')->load($category->getId())->getImage()
        );

and this:

app/code/local/Mage/Page/Block/Html/Topmenu.php

    $urls = Mage::getBaseUrl('media').'catalog/category/'.$child->getData('thumbnail');
    $img = '<img class="img-responsive" src="'.$urls.'" />';

    $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
    $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>'
        . $this->escapeHtml($child->getName()) . '</span>'.$img.' </a>';

The images are in the menu and everything work fine but in the frontend I see this error:

"NetworkError: 404 Not Found - http://example.com/media/catalog/category/"

What is wrong?

Answer 1

1. Reindex All.
2. Check the permission Media folder 775.
3. Clear your Magento & browser cache.

EDIT:

if (!empty($child->getData('thumbnail'))) {
    $urls = Mage::getBaseUrl('media').'catalog/category/'.$child->getData('thumbnail');
} else {
    $urls = Mage::getBaseUrl('media').'catalog/category/default.png';
}

$img = '<img class="img-responsive" src="'.$urls.'" />';

$html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
$html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>'
      . $this->escapeHtml($child->getName()) . '</span>'.$img.' </a>';

Nb: don't forget to add a some default category image: media/catalog/category/default.png