Image not showing on page template in Twenty Fifteen-theme

Question

I'm creating a custom template for a few of my subpages using the Twenty Fifteen theme. For some reason the linked image below won't show, even though the url seems to be correct.

I've started with page.php, renamed it and added these three lines of code below the #main opening tag:

<?php if ( is_page( 'om-oss' ) ) : ?>
<img style="height:373px;width:83.3334%;margin:0 8.3333%;" src="<?php echo get_template_directory(); ?>/img/bil.jpg" />
<?php endif; ?>

The complete code in my new template looks like this:

<?php /* Template Name: Ny side */ ?> 
<?php get_header(); ?>

    <div id="primary" class="content-area">

        <main id="main" class="site-main" role="main">
        <?php if ( is_page( 'om-oss' ) ) : ?>
            <img style="height:373px;width:83.3334%;margin:0 8.3333%;" src="<?php echo get_template_directory(); ?>/img/bil.jpg" />
        <?php endif; ?>
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();

            // Include the page content template.
            get_template_part( 'content', 'page' );

            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;

        // End the loop.
        endwhile;
        ?>

        </main><!-- .site-main -->
    </div><!-- .content-area -->

<?php get_footer(); ?>

The image is located in:

wp-content\themes\twentyfifteen\img\bil.jpg

Changing the url up gives me a symbol of a broken link, so it seems nothing is wrong with it. Even so I'm just getting a empty box with a border around it instead of the actual image. Anyone know what might be wrong?

Edit: I'm by the way running the page locally, using WAMP.

What it looks like now:

Answer 1

get_template_directory() returns a system path not a resource uri.

Use get_template_directory_uri() instead.