bloginfo('template_directory') img src

Hi all

I’m lazy loading some images who’s url are added in custom fields.

The lazy load plugin I’m using requires a place-holder image in the src and the actual image in data-original.

https://www.appelsiini.net/projects/lazyload

I need the images height and width as well so I’m using wp_get_attachment_image_src()

My problem is using bloginfo(‘template_directory’) to get the place-holding image.

The first img here doesn’t show the place-holder images but does output the url to the page.

<?php	

        	$attch_id_1 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img1', true));
        	$image_attributes_1 = wp_get_attachment_image_src( $attch_id_1, 'full'); 

        	$attch_id_2 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img2', true));
        	$image_attributes_2 = wp_get_attachment_image_src( $attch_id_2, 'full');

        	$attch_id_3 = pn_get_attachment_id_from_url(get_post_meta($post->ID, 'img3', true));
        	$image_attributes_3 = wp_get_attachment_image_src( $attch_id_3, 'full');

         	echo '<img src="'.bloginfo('template_directory').'"/images/img-BG.png" data-original="'.$image_attributes_1[0].'">';

        	echo '<img src="https://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_2[0].'">';

        	echo '<img src="https://localhost/wordpress-cd/wp-content/themes/cd/images/img-BG.png" data-original="'.$image_attributes_3[0].'">';

        ?>

The source for the page looks like this.

https://localhost/wordpress-cd/wp-content/themes/cd<img src=""/images/img-BG.png"

Why can’t I use bloginfo(‘template_directory’) here?

How can I output the img’s