get_post_meta inside an img src

I am having problems with displaying an image.

Basically I have a shop page currently with 3 category sub pages (each of which have their own sub pages of products). I want the shop code to echo out a div of a set size for each category, which includes the name of the category and an image that I would set using the location of using a custom field called category_image (each category has its own image).

The image and title will be a link to the category page containing the category products.

Each category page has a custom field called category_image containing the image location e.g. /images/accessories.jpg

This is the code have used in my store page:

<?php

    /*
        Template Name: Store
    */

?>

<?php get_header(); the_post(); ?>

	<div id="main-content">

	<?php

		$categoriesCF = get_post_meta($post->ID, "categories", true);
		// example value = "Fat Quarter Bundles|97,Fat Quarters|99"

		$allCategories = explode(",", $categoriesCF);
		// $allCategories[0] = "Fat Quarter Bundles|97"
		// $allCategories[1] = "Fat Quarters|99"

		foreach ($allCategories as $category) {

			$pieces = explode("|", $category);
			// $pieces[0] = "Fat Quarter Bundles"
			// $pieces[1] = 97

			$link = get_permalink($pieces[1]);
			echo "<div class='category group'>";
			echo "<h3><a href='$link'>" . $pieces[0] . "</a></h3>";
			echo "<img src='" . get_post_meta($post->ID, "category_image", true) . "' />";

			echo "</div>";

		};
	?>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Unfortunately since I actually know nothing about PHP, except for a miniscule amount from my trial and error, I can’t figure out how to echo out the image. The div is the right size, the title links to the category page, but it wont show the image!
I have a feeling since the img src is using get_post_meta it does not know which post to get the category_image from? But I do not know how to tell it to look in the relevant category page and echo the category_image.

Oh and the code I have used was actually a longer code that I am also using in my category page. it includes code to show all the products of each category, but I didn’t want that for the store page so and tried stripping it down.

(this is the original code which is also used in my shop page)

<?php

    /*
        Template Name: Product Category
    */

?>

<?php get_header(); the_post(); ?>

	<div id="main-content">

<?php

	$categoriesCF = get_post_meta($post->ID, "categories", true);
	// example value = "Fat Quarter Bundles|97,Fat Quarters|99"

	$allCategories = explode(",", $categoriesCF);
	// $allCategories[0] = "Fat Quarter Bundles|97"
	// $allCategories[1] = "Fat Quarters|99"

	foreach ($allCategories as $category) {

		$pieces = explode("|", $category);
		// $pieces[0] = "Fat Quarter Bundles"
		// $pieces[1] = 97

		$link = get_permalink($pieces[1]);
		echo "<div class='product-group group'>";
		echo "<h3><a href='$link'>" . $pieces[0] . "</a></h3>";

		query_posts("posts_per_page=-1&post_type=page&post_parent=$pieces[1]");

		while (have_posts()) : the_post(); ?>

		 <a href="<?php the_permalink(); ?>" class="product-jump" title="<?php echo "$" . get_post_meta($post->ID, "product_price", true); ?>" data-large="<?php get_post_meta($post->ID, "product_image", true); ?>">

		     <?php echo "<img src='" . get_post_meta($post->ID, "product_regular", true) . "' />"; ?>
		     <span class="product-title"><?php the_title(); ?></span>

		 </a>

		<?php endwhile; wp_reset_query();

		echo "</div>";

	};
?>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

As I said before I know very little about JS or PHP, only HTML & CSS. However I am starting to learn.

I created my wordpress template after watching the Lynda.com program on creating custom wordpress template which doesn’t really require any php knowledge.

Some help would be good in displaying the category image.

I hope this all makes sense!