Image loading in browser but not on phone Cordova

Im currently using the Ionic framework to try and develop an application, and im trying to use images. When i run the application in Google Chrome ($ionic serve) the image will load correctly, but when I run the image on an emulator or directly on to my device, the image won't load. In my code i have this urlTemplate which is what's displaying:

<div clas="portal-bg">
<div class="portal-quote">
    <p>
        Gah
    </p>
</div>
<div class="portal-logo">
    <img src="../img/home-bg.png" />
</div>

<div class="list list-inset">
    <label class="item item-input">
        <input type="email" placeholder="e-mail">
    </label>
    <label class="item item-input">
        <input type="password" placeholder="password">
    </label>
</div>
<div class="row">
    <div class="col col-offset-33">
        <button class="button button-dark">
            Sign In
        </button>
    </div>
    <div class="col">
        <button class="button button-dark">
            Sign Up
        </button>
    </div>
</div>

the image is in "portal-logo" the css i have attatched to this image is:

.portal-logo{
margin-left: 40%;
margin-top:5%;

}

.portal-logo img{
width:30%;
height:auto;

}

what could be the problem?