adding the full image path to a wordpress javascript file

I am currently building a WordPress theme where I am using jQuery to append and prepend some ornate images to a h4 tag with a class of beechheader in the page template markup.

Before turning the static html files into a WordPress theme, the code below worked fine and appended and prepended the images to any h4 tag with a class of beechheader. The code is in a separate file called whatever.js located in the javascripts directory inside the theme

The jQuery code appears to be enqueued correctly in the functions file and I have called the whatever.js code inside the footer.php file using:

<script src="<?php bloginfo('template_directory'); ?>/javascripts/whatever.js"></script>
right before the closing body tag.

Here is the code inside the whatever.js file that worked fine statically but now doesnt work

`// prepend some images to the headers
$(function() {

$(“h4.beechheader”)
.prepend(‘<img src=”/images/beechleft.gif” alt=”” />’)
.append(‘<img src=”/images/beechright.gif” alt=”” />’);
});`
I tried adding

<?php echo get_template_directory_uri(); ?>
before the trailing slash before images as you would in the html file. My research leads me to believe jQuery files may need to be handled a bit differently using the wp_localize_script function but I am unsure of the syntax or what to do. Can anyone help?